skills.rest
kurtstohrer
kurtstohrerCOMMUNITY
Explore all skills by this author →
GitHub

annotask-init

Scan web app repositories to generate a .annotask/design-spec.json with design tokens.

3|Updated Mar 28, 2026
Search Tags:#theme#tailwind#tokens#scan#framework-detection#design-spec#annotask
One-click install
npx skills add https://github.com/kurtstohrer/annotask --skill annotask-init
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: annotask-init
Source: https://github.com/kurtstohrer/annotask/tree/main/.agents/skills/annotask-init
Command: npx skills add https://github.com/kurtstohrer/annotask --skill annotask-init

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Initializes and automates the tedious project setup required by Annotask by scanning a codebase to discover framework, styling systems, design tokens, icon libraries, and component usage so developers do not have to manually assemble a design spec.

Core Features & Use Cases

  • Detects frontend framework and styling systems from package.json and source files to classify framework and styling (Vue, React, Svelte, Tailwind, scoped CSS, CSS modules).
  • Extracts design tokens: colors, typography, spacing, border radii, and breakpoints from CSS variables, Tailwind config, and common patterns, and classifies tokens into semantic roles.
  • Identifies icon and component libraries and their versions from package.json and source imports, writes a unified .annotask/design-spec.json, updates .gitignore, and cleans up legacy config.
  • Use case: onboarding a new repo so the Annotask Theme page is automatically populated with editable tokens for live previews and agent-driven code tasks.

Quick Start

Run annotask-init to scan this repository and write .annotask/design-spec.json with detected tokens, libraries, and breakpoints.

Frequently Asked Questions about annotask-init

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

FAQPage Schema
How do I extract design tokens from a Tailwind config and source files?▼

To extract design tokens from Tailwind config and source files, run a scanner that analyzes CSS variables and component classes to classify colors, typography, spacing, borders, and breakpoints into a unified JSON design spec.

Can I scan a React or Vue project to automatically generate a design spec?▼

Yes, you can scan React, Vue, Svelte, Solid, or plain HTML projects to generate a design spec. The scanner detects frameworks from package.json and extracts styling systems like scoped CSS or CSS modules.

What is a design specification file and how does it automate project onboarding?▼

A design specification file is a JSON document containing colors, typography, spacing, breakpoints, icons, and components. It automates project onboarding by populating live previews without manually assembling styles.

Does design token detection work with scoped CSS or CSS modules?▼

Design token detection works with scoped CSS, CSS modules, and Tailwind. The scanner extracts border radii, typography, and spacing from common patterns, applying empty defaults when detection fails.

What happens to legacy config files when generating a new design spec?▼

When generating a new design spec, the scanner removes legacy configuration files if present, writes the new spec to a designated directory, and updates .gitignore to prevent committing the generated folder.

Related Skills

Explore More Software Engineering Skills→
Harmeet10000Harmeet10000
7

clerk-setup

Automate Clerk authentication setup by detecting frameworks from package.json.

Community
Intermediate
stribusstribus
1

reversa-design-system

Extract and normalize design tokens from CSS and theme files into structured documentation.

Community
Intermediate
patternflypatternfly
10

figma-icon-finder

Identify PatternFly icons in Figma designs and generate React import statements.

Official
Intermediate
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced