ui-init

Detect project tooling and install missing UI dev dependencies.

3|Updated May 16, 2026
One-click install
npx skills add https://github.com/dawitlabs/ui-skills --skill ui-init
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-init
Source: https://github.com/dawitlabs/ui-skills/tree/main/skills/ui-init
Command: npx skills add https://github.com/dawitlabs/ui-skills --skill ui-init

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Initializes the UI/UX skill set so an AI-driven UI audit can reliably detect the project’s current setup, install missing dev-only tooling, and document the project conventions for subsequent skills.

Core Features & Use Cases

  • Project readiness detection: Checks for Playwright, axe-core, token files, a design brief, and required CSS/UX foundations such as prefers-reduced-motion and skip links.
  • Guided installation of dev dependencies: Installs missing tooling like Playwright (including Chromium) and axe-core without guessing.
  • Skill coordination via documentation: Updates the CLAUDE.md/AGENTS.md with an up-to-date UI skills section so later skills know where tokens, brief files, and editing targets live.

Quick Start

Run /ui-init to scan your repo, confirm what’s missing, and set up the UI skills prerequisites before using /design-grill, /tokens, /uiux, /uicolor, /animate, /copy, /a11y, or /landing.

Frequently Asked Questions about ui-init

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

FAQPage Schema
How do I set up Playwright and axe-core for automated UI accessibility audits?

To set up Playwright and axe-core for UI accessibility audits, run /ui-init to scan your repo, detect missing devDependencies, and install required tooling like Chromium without guessing. It configures the prerequisite environment for automated accessibility scanning.

What's the best way to initialize design tokens and project conventions for AI-driven UI audits?

Initializing design tokens and UI conventions for AI audits requires detecting existing token locations and a DESIGN-BRIEF. This skill scans the repo state without assumptions, then updates CLAUDE.md and AGENTS.md with verified setup details so subsequent UI skills know where editing targets live.

Do I need prefers-reduced-motion and skip links before running UI automation checks?

Yes, you need prefers-reduced-motion and skip links to ensure WCAG motion support. This setup process detects required CSS and UX foundations, confirms their presence, and installs missing tooling to support accessibility compliance before running animation checks.

How does project readiness detection work for UI screenshot verification and animation checks?

Project readiness detection works by exploring the current repo state to check for Playwright, axe-core, token files, and design briefs. It confirms missing components and installs dev-only tooling so later UI skills can reliably perform screenshot verification and animation checks.

Can I use this UI setup tool with an existing codebase that already has token files?

Yes, you can use this UI setup tool with existing codebases. It applies to new or changing codebases by detecting existing project tooling and conventions without assumptions, ensuring later UI skills can perform design-value migrations using your current token locations.