How does the competitive research feature work?

It uses WebFetch to analyze competitor URLs you provide, identifying layout patterns, color schemes, and component styles to inform your own design choices.

When is the best time to run the ui-spec skill?

This skill is designed to be used after you have a functional specification (via /specify) but before you create an implementation plan (via /plan).

Is accessibility handled by this skill?

Yes, every screen specification includes mandatory requirements for keyboard navigation flow and screen reader announcements.

Do I need an existing design system to use this skill?

No, the skill will guide you through a discovery process to create one if it doesn't exist, or reference your existing configuration files like tailwind.config.js.

Does this skill generate actual frontend code?

It generates a detailed markdown specification (.verified/features/ui-spec.md) that serves as a blueprint for Claude to follow during the coding phase.

UI Specification Architect

Name: UI Specification Architect
Author: mikemyl

bymikemyl

•

Design Tools

Generates comprehensive UI design contracts including brand identity, design systems, and detailed screen specifications for feature development.

The UI Specification Architect skill bridges the gap between functional requirements and technical implementation by creating a structured design contract. It guides developers through brand discovery, establishes project-wide design tokens, and generates detailed specifications for individual screens. By analyzing competitors via web research and documenting interactions, accessibility, and component inventories, it ensures that AI-generated frontend code aligns with visual standards and UX best practices before implementation begins.

Key Features

01Competitive research and design pattern analysis via WebFetch

02Centralized design system management for project-wide consistency

03Automated component inventory for shadcn and custom libraries

041 GitHub stars

05Detailed screen specs covering states, interactions, and responsive behavior

06Interactive brand and design system discovery framework

Use Cases

01Establishing a consistent design system for new greenfield projects

02Translating functional requirements into actionable frontend design blueprints

03Conducting competitive analysis to inform UI/UX decisions for new features

Key Features

01Competitive research and design pattern analysis via WebFetch

02Centralized design system management for project-wide consistency

03Automated component inventory for shadcn and custom libraries

041 GitHub stars

05Detailed screen specs covering states, interactions, and responsive behavior

06Interactive brand and design system discovery framework

Use Cases

01Establishing a consistent design system for new greenfield projects

02Translating functional requirements into actionable frontend design blueprints

03Conducting competitive analysis to inform UI/UX decisions for new features