1k-implementing-figma-designs
Implementing Figma Designs
This skill helps you implement Figma designs 1:1 using the OneKey component library.
Core Principles
Focus on UI First, Data Later
When implementing Figma designs, prioritize pixel-perfect UI over data integration:
- Use mock data - Hardcode data that matches the design exactly
- Skip i18n - Use plain strings directly from the design, no
intl.formatMessage - Skip API calls - No need to fetch real data at this stage
- Match the design - Focus on visual accuracy, spacing, colors, and layout
What NOT to do
- Don't worry about where data comes from
- Don't add translation keys (ETranslations)
More from onekeyhq/app-monorepo
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
109implementing-figma-designs
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
771k-coding-patterns
Coding patterns and best practices — React components, promise handling, and TypeScript conventions.
691k-code-quality
Code quality standards — lint (eslint/oxlint), type check (tsc), pre-commit hooks, and comment conventions. All comments must be in English.
681k-date-formatting
Date and time formatting — use OneKey dateUtils (formatDate/formatTime) instead of native JS date methods.
681k-git-workflow
Git workflow and conventions — branching, commit messages, and PR creation.
68