What is considered an 'atomic step' in this skill?

An atomic step is a single, small action that takes 2-5 minutes to complete, such as creating a component skeleton or writing one specific unit test.

Does this skill support backend implementation?

While the logic of atomic planning applies to any development, this specific skill is optimized for frontend tasks by referencing frontend-specific designs and constraints.

How does this differ from standard architecture planning?

This skill focuses on micro-level implementation—specific files and lines of code—rather than macro-level architecture or feature scoping.

Why are verification commands included in every step?

Including verification commands ensures that each small change is functionally correct before moving to the next step, significantly reducing debugging time.

Where is the implementation plan saved?

The plan is presented directly in the output for the user to follow and is not saved to a file, allowing for immediate execution.

Atomic Frontend Implementation Planner

Name: Atomic Frontend Implementation Planner
Author: yellinzero

byyellinzero

0•

デザインツール

Generates granular, step-by-step implementation plans for frontend tasks with integrated verification commands.

This skill transforms complex frontend tasks into a series of micro-level atomic steps, ensuring a methodical and error-resistant development process. It focuses strictly on low-level implementation rather than high-level architecture, providing specific file paths, code actions, and verification commands for every 2-5 minute block of work. By enforcing a 'Setup-Implement-Verify-Commit' workflow, it helps developers maintain high focus and code quality while leveraging Claude Code for precise execution.

主な機能

01Context-Aware Planning: Automatically references project design docs, tasks, and constraints.

02Automated Git Workflow: Concludes every plan with structured, best-practice commit steps.

030 GitHub stars

04Strict Step Granularity: Prevents errors by ensuring only one action is performed per step.

05Integrated Verification: Provides specific bash commands to validate every code change immediately.

06Atomic Task Decomposition: Breaks down features into manageable 2-5 minute work increments.

ユースケース

01Breaking down a complex UI component implementation into testable, bite-sized units.

02Standardizing the implementation process for team members or AI-assisted development.

03Creating a precise, step-by-step checklist for refactoring specific frontend logic.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yellinzero/aico aico-frontend-plan

For use in Claude.ai and ChatGPT

Download Skill