Menu
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/tmcfarlane/oh-my-cursor --skill implementing-figma-designsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Systematic 4-phase debugging with root cause investigation. Use when fixing bugs to prevent random fixes.
Generate and iterate images in Cursor using the built-in image model and strong prompts. Use when creating icons, illustrations, UI mockups, diagrams, marketing visuals, or any raster asset from a text description or reference image.
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.
Based on SOC occupation classification
Showing SKILL.md
| name | implementing-figma-designs |
| description | Implements Figma designs 1:1 using OneKey component library (还原设计稿). |
| allowed-tools | Read, Grep, Glob, Bash, Write, Edit |
This skill helps you implement Figma designs 1:1 using the OneKey component library.
When implementing Figma designs, prioritize pixel-perfect UI over data integration:
intl.formatMessageWhen you need to use a component, look up its source and demo:
packages/components/src/{category}/{ComponentName}/
Categories:
primitives/ - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableTextforms/ - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInputactions/ - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltipcomposite/ - Dialog, Tabs, Banner, Carousel, Table, Steppercontent/ - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurViewlayouts/ - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBarpackages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
Note: Some demos have different names (e.g., AccordionGallery.tsx, NewTabsGallery.tsx)
Read the source to understand props and structure:
Read: packages/components/src/{category}/{ComponentName}/index.tsx
Read the demo for usage examples:
Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx
@onekeyhq/componentsimport { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';
$1 = 4px, $2 = 8px, $3 = 12px, $4 = 16px$5 = 20px, $6 = 24px, $8 = 32px, $10 = 40px$text, $textSubdued, $textDisabled$bg, $bgSubdued, $bgHover, $bgActive$border, $borderSubdued, $borderActive$icon, $iconSubdued, $iconDisabledHeadings (large to small):
$headingXxl, $headingXl, $headingLg, $headingMd, $headingSm, $headingXsBody text (large to small):
$bodyLg, $bodyMd, $bodySm, $bodyXsWith medium weight (append Medium):
$bodyLgMedium, $bodyMdMedium, $bodySmMedium, $bodyXsMediumUsage with SizableText:
<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
Layout with Stack:
<YStack gap="$4"> {/* Vertical */}
<XStack gap="$4"> {/* Horizontal */}
<Stack gap="$4"> {/* Default vertical */}
Mock Data:
const mockItems = [
{ name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
{ name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];
Button Actions:
<Button onPress={() => console.log('clicked')}>Action</Button>