Can it work with my existing project structure?

The skill includes a project structure verification step to ensure new components are placed correctly within your existing hooks, features, and styles directories.

How does this skill handle Figma integration?

The skill can extract design tokens, assets, and visual references directly from Figma URLs to ensure 1:1 visual fidelity in the generated code.

Does it support accessibility standards?

Yes, it automatically implements semantic HTML, ARIA attributes, keyboard navigation support, and checks for WCAG AA color contrast compliance.

What tech stack is this skill optimized for?

It is specifically designed for modern frontend environments using React, TypeScript, and Tailwind CSS.

Frontend Design Implementation

Name: Frontend Design Implementation
Author: takumi12311123

bytakumi12311123

•

디자인 도구

Translates Figma designs into production-ready, accessible UI components using React, TypeScript, and Tailwind CSS.

소개

The Frontend Design skill provides a comprehensive workflow for converting design mockups into high-fidelity, pixel-perfect code. It automates the implementation of UI components while ensuring strict adherence to design systems, accessibility standards (WCAG AA), and performance optimization. By integrating directly with Figma URLs and design tokens, it streamlines the handoff process and enforces professional coding patterns, including TypeScript type safety and reusable component structures.

주요 기능

Optimized Tailwind CSS Implementation
1 GitHub stars
1:1 Visual Fidelity Translation
Automated Accessibility Compliance (WCAG AA)
Design System & Token Integration
Comprehensive Component Testing Patterns

사용 사례

Converting Figma design mocks into functional React components
Refactoring legacy UI to align with a modern design system
Implementing responsive and accessible interfaces from design URLs

소개

주요 기능

Optimized Tailwind CSS Implementation
1 GitHub stars
1:1 Visual Fidelity Translation
Automated Accessibility Compliance (WCAG AA)
Design System & Token Integration
Comprehensive Component Testing Patterns

사용 사례

Converting Figma design mocks into functional React components
Refactoring legacy UI to align with a modern design system
Implementing responsive and accessible interfaces from design URLs