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.

主要功能

01Optimized Tailwind CSS Implementation

021 GitHub stars

031:1 Visual Fidelity Translation

04Automated Accessibility Compliance (WCAG AA)

05Design System & Token Integration

06Comprehensive Component Testing Patterns

使用场景

01Converting Figma design mocks into functional React components

02Refactoring legacy UI to align with a modern design system

03Implementing responsive and accessible interfaces from design URLs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add takumi12311123/dotfiles frontend-design

For use in Claude.ai and ChatGPT

Download Skill