Agent Skills: Frontend Init

Frontend Init

Initialize frontend engineer configuration files: design system and constraints.

Language Configuration

Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.

Process

1. Check existing: Look for docs/reference/frontend/design-system.md and constraints.md
2. Create directory structure:

   docs/reference/frontend/
   ├── design-system.md
   ├── constraints.md
   ├── designs/
   └── tasks/
   

3. Design System Setup:
   • Option A: Extract from reference website using aico-frontend-style-extraction skill
   • Option B: Use template from references/design-system.template.md
4. Constraints Setup:
   • Guide user through tech stack questions
   • Use template from references/constraints.template.md
5. Save output: Write to docs/reference/frontend/

Document Header Format

All generated documents MUST use this unified header format:

# [Document Title]

> Project: [project-name]
> Created: YYYY-MM-DD
> Last Updated: YYYY-MM-DD

Design System Options

Option A: Extract from Reference Website

If user provides a reference URL:

1. Check if Playwright MCP is available
2. Navigate to URL → take screenshot → analyze
3. Extract design tokens using aico-frontend-style-extraction skill

Option B: Fill Template

If no reference:

1. Read template from references/design-system.template.md
2. Ask about color preferences (light/dark, accent color)
3. Ask about typography (serif/sans-serif)
4. Fill in reasonable defaults

Constraints Questions

| Question | Options | | ----------------- | -------------------------------------------- | | Framework | React, Vue, Next.js, Svelte | | TypeScript | Yes (recommended), No | | Component Library | shadcn/ui, Ant Design, MUI, None | | Styling | Tailwind CSS, CSS Modules, styled-components | | Testing | Vitest, Jest, None | | Directory Pattern | Feature-based, Type-based |

Templates

• references/design-system.template.md - Design tokens template
• references/constraints.template.md - Tech stack and conventions template

Update Instructions File

After creating constraint files, update the project's AI instructions file to reference them:

1. Check for existing instructions file:

   • Look for CLAUDE.md (Claude Code) or AGENTS.md (Codex) in project root
   • If neither exists, create CLAUDE.md

2. Add reference section at the end of the file:

   ## Reference Documents
   
   The following constraint documents should be read before starting work:
   
   - `docs/reference/frontend/design-system.md` - Design tokens and visual guidelines
   - `docs/reference/frontend/constraints.md` - Tech stack and coding conventions
   

3. If file already has Reference Documents section: Append the new references if not already present

Output

✓ Created docs/reference/frontend/design-system.md
✓ Created docs/reference/frontend/constraints.md
✓ Created docs/reference/frontend/designs/
✓ Created docs/reference/frontend/tasks/
✓ Updated CLAUDE.md with reference to constraint files
✓ Frontend environment initialized

Key Rules

• ALWAYS use the unified header format
• MUST create both design-system.md and constraints.md
• ALWAYS create designs/ and tasks/ directories
• MUST update CLAUDE.md or AGENTS.md with reference to constraint files