aico-frontend-init_skill

Overview

This skill initializes a frontend environment by creating a design system and constraints documents from templates and reference extraction. It scaffolds docs/reference/frontend with required files and folders so teams start frontend work with clear tokens, conventions, and constraints. The output strictly uses a unified header format and populates sensible defaults or extracts styles from a reference site when provided.

How this skill works

The skill checks for existing docs at docs/reference/frontend/design-system.md and constraints.md, then creates the directory structure and required files if missing. For the design system it either extracts tokens from a provided reference URL using a style-extraction capability or fills a template with asked preferences. For constraints it prompts for tech-stack choices, fills the constraints template, and writes both files plus designs/ and tasks/ folders to docs/reference/frontend.

When to use it

• When running /frontend.init or asking to initialize the frontend environment
• At the start of frontend work to establish design tokens and engineering constraints
• When you need docs/reference/frontend/design-system.md and constraints.md created
• When onboarding new frontend engineers and you need a single source of truth
• When you want to derive a design system from a reference website URL

Best practices

• Always confirm project language from aico.json before generating content
• Provide a reference URL when you want accurate style extraction instead of defaults
• Answer the constraints questions (framework, TypeScript, styling, testing) to tailor the output
• Review and tweak generated tokens and constraints — treat them as living documents
• Commit the created docs and folders to version control immediately

Example use cases

• Initialize frontend docs for a new project to lock in tokens, typography, and colors
• Extract color, spacing, and component tokens from an existing marketing site to bootstrap a design system
• Establish team conventions: framework choice, testing tools, and directory patterns before feature work
• Create a baseline constraints.md to enforce TypeScript, styling, and component library choices across the repo
• Quickly scaffold designs/ and tasks/ folders to collect UI assets and work items