Skills
.Work. You
Rest

annotask-init

Community

Scan a project and generate Annotask design spec.

Software Engineering#theme#tailwind#tokens#scan#framework-detection#design-spec#annotask
Authorkurtstohrer
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: annotask-init
Download link: https://github.com/kurtstohrer/annotask/archive/main.zip#annotask-init

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.