How does it handle design systems?

The skill reads your project's specific design-system.md and constraint files to ensure all generated UI code uses correct tokens, typography, and spacing.

What is the 'TDD Iron Law' in this skill?

The TDD Iron Law mandates that no production code can be written without a failing test first, ensuring that every feature is verified and covered by tests from the start.

What happens after the implementation is complete?

The skill automatically runs unit tests and build checks, updates the task status in your documentation, and prompts you to notify the PM for acceptance.

Do I need a plan before using this skill?

Yes, this skill requires a task file to exist in your project documentation (typically generated via /frontend.tasks) before implementation can begin.

Frontend TDD Implementation

Name: Frontend TDD Implementation
Author: yellinzero

byyellinzero

0•

设计工具

Executes frontend implementation tasks using strict Test-Driven Development (TDD) cycles and design system constraints.

This skill automates the frontend development workflow within Claude Code by enforcing a disciplined Test-Driven Development (TDD) process. It ensures all production code is preceded by a failing test, strictly adheres to predefined design systems and architectural constraints, and maintains project synchronization by updating task statuses and notifying project managers upon completion. It is ideal for developers seeking high-quality, bug-free UI components that perfectly match design specifications and project-specific coding standards.

主要功能

010 GitHub stars

02Seamless integration with task management and story breakdown files

03Comprehensive post-implementation testing and build checks

04Automatic status updates and PM notification workflow

05Strict TDD lifecycle enforcement (Red-Green-Refactor)

06Automated verification of design system and architectural constraints

使用场景

01Executing frontend implementation plans derived from story breakdowns

02Building UI components from design specifications with guaranteed test coverage

03Fixing UI bugs by creating a reproducible failing test case first

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yellinzero/aico aico-frontend-implement

For use in Claude.ai and ChatGPT

Download Skill