skills.rest
ivanyeors
ivanyeorsCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Translate Figma designs into TypeScript frontend code with design tokens.

Updated Nov 8, 2025
Search Tags:#typescript#development#accessibility#frontend#components#design-to-code#design-tokens
One-click install
npx skills add https://github.com/ivanyeors/product-agentic-templates --skill frontend-development-ivanyeors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/ivanyeors/product-agentic-templates/tree/main/.cursor/skills/05-frontend-development
Command: npx skills add https://github.com/ivanyeors/product-agentic-templates --skill frontend-development-ivanyeors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides frontend code implementation including project architecture, component development from design specs, state management, API integration, performance optimization, and accessibility. Use when implementing UI in code, setting up a frontend project, building components from Figma designs, integrating APIs, optimizing performance, or when the user says "implement the frontend", "build the UI", "set up the project", "code this component", or "implement from Figma". Works with the implement-design skill for Figma-to-code translation. Requires completed Frontend Design artifacts as input.

Core Features & Use Cases

  • Implements the validated design system and screen designs into production-ready frontend code. This covers project setup, architecture, component implementation, state management, API integration, performance optimization, and accessibility.
  • Provides a structured process around phase flows, design tokens, accessibility checks, and handoff readiness to accelerate delivery.
  • Use cases include translating Figma designs into code, building atom/molecule/organism components, and implementing screens with proper data and states.

Quick Start

Translate the provided frontend designs into production-ready frontend code following the project's architecture and design tokens.

Frequently Asked Questions about frontend-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate Figma designs into production-ready frontend code?▼

To translate Figma designs into frontend code, you need completed frontend design artifacts as input. The process implements UI components, architecture, and state management using strict TypeScript and design tokens to ensure production readiness.

What is the best way to structure a frontend project from design specs?▼

The best way to structure a frontend project from design specs is by setting up architecture around atomic components, molecules, and organisms. This approach enforces design tokens and pre-commit checks for quality assurance.

Do I need strict TypeScript for building UI components from designs?▼

Yes, strict TypeScript is required for building UI components from designs. It enforces type safety during component creation, API integration, and state management to deliver production-ready frontend implementations.

How does accessibility compliance factor into frontend implementation?▼

Accessibility compliance is integrated into frontend implementation through required accessibility checks and standards. This ensures that translated UI components and screens meet necessary compliance before handoff.

Can I use this approach to integrate APIs and optimize frontend performance?▼

Yes, this approach supports API integration and performance optimization during UI development. It connects screen designs with proper data and states while maintaining design token architecture and accessibility standards.

What are the limitations when bootstrapping a frontend project from design specs?▼

A key limitation when bootstrapping a frontend project is the requirement for completed Frontend Design artifacts as input. Without these validated design system specs, the architecture setup and component implementation cannot proceed accurately.

Related Skills

Explore More Software Engineering Skills→
darblexdarblex

ui-ux-pro-max

Generate design systems and frontend UI code for web frameworks.

Community
Advanced
gelsonsimoesgelsonsimoes

webapp-testing

Automate web application testing with Playwright to verify end-to-end functionality.

Community
Intermediate
vladolaruvladolaru
6

using-figma

Translate Figma nodes and tokens into a tokenized design specification and implementation plan.

Community
Advanced
QvvvvvvQQvvvvvvQ
25

webapp-building

Automates React web application initialization with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate