@flitzrrr/frontend-design-skills 1.0.0 → 1.1.0

package/.aider/conventions.md

@@ -1,6 +1,6 @@
 # Frontend Design Skills — Aider Conventions
 
-This repository contains 21 opinionated web design skills from 12 curated sources.
+This repository contains opinionated web design skills from curated sources.
 Each skill is a self-contained folder under `skills-src/` containing a `SKILL.md` file.
 
 ## How to Use
@@ -32,7 +32,7 @@ skills-src/<skill-name>/SKILL.md
 ### Strategy & Process
 - `skills-src/customer-journey/SKILL.md` — Personas, touchpoints, onboarding
 - `skills-src/design-process/SKILL.md` — Briefing, wireframing, prototyping
-- `skills-src/ai-design-workflow/SKILL.md` — AI/KI integration in design
+- `skills-src/ai-design-workflow/SKILL.md` — AI integration in design
 - `skills-src/landing-pages/SKILL.md` — Conversion structure, CTAs
 - `skills-src/website-audit/SKILL.md` — Site analysis, relaunch planning
 

package/.cursorrules

@@ -2,7 +2,7 @@
 # This file makes skills discoverable in Cursor IDE.
 # For detailed skill usage, see individual SKILL.md files.
 
-## Available Skills (21 total from 12 sources)
+## Available Skills
 
 ### Core Design
 - Use `skills-src/ui-design/SKILL.md` for layout, grids, visual hierarchy, components, whitespace
@@ -23,7 +23,7 @@
 ### Strategy & Process
 - Use `skills-src/customer-journey/SKILL.md` for personas, touchpoints, onboarding
 - Use `skills-src/design-process/SKILL.md` for briefing, wireframing, prototyping, handoff
-- Use `skills-src/ai-design-workflow/SKILL.md` for AI/KI integration in design workflow
+- Use `skills-src/ai-design-workflow/SKILL.md` for AI integration in design workflow
 - Use `skills-src/landing-pages/SKILL.md` for conversion structure, CTAs, A/B testing
 - Use `skills-src/website-audit/SKILL.md` for site analysis, relaunch planning, SEO migration
 

package/.github/copilot-instructions.md

@@ -1,6 +1,6 @@
 # Frontend Design Skills — VS Code / GitHub Copilot
 
-This repository contains 21 opinionated web design skills from 12 sources.
+This repository contains opinionated web design skills from curated sources.
 Each skill is a self-contained folder under `skills-src/` with a `SKILL.md` file.
 
 ## How to Use Skills
@@ -32,7 +32,7 @@ skills-src/<skill-name>/SKILL.md
 ### Strategy & Process
 - `skills-src/customer-journey/` — Personas, touchpoints, onboarding
 - `skills-src/design-process/` — Briefing, wireframing, prototyping
-- `skills-src/ai-design-workflow/` — AI/KI integration in design
+- `skills-src/ai-design-workflow/` — AI integration in design
 - `skills-src/landing-pages/` — Conversion structure, CTAs
 - `skills-src/website-audit/` — Site analysis, relaunch planning
 

package/.lovable

@@ -1,7 +1,7 @@
 # Frontend Design Skills — Lovable Project Instructions
 # This file makes skills available in Lovable AI.
 
-This repository contains 21 opinionated web design skills from 12 curated sources,
+This repository contains opinionated web design skills from curated sources,
 covering UI/UX, typography, color, accessibility, branding, and modern design trends.
 
 ## How to Use
@@ -13,19 +13,19 @@ domain, read and follow the corresponding `SKILL.md`.
 ## Key Skills for Lovable Projects
 
 ### Web Development
-- `skills-src/ui-design/SKILL.md` — Layout, Raster, visuelle Hierarchie, Komponenten
-- `skills-src/ux-design/SKILL.md` — Nutzerforschung, Informationsarchitektur
-- `skills-src/responsive-design/SKILL.md` — Mobile-First, Breakpoints, Fluid Grids
-- `skills-src/component-patterns/SKILL.md` — Compound Components, Design Tokens, Theming
-- `skills-src/agent-ui-design/SKILL.md` — Chat-Interfaces, Streaming UI, Agent UX
+- `skills-src/ui-design/SKILL.md` — Layout, grids, visual hierarchy, components
+- `skills-src/ux-design/SKILL.md` — User research, information architecture
+- `skills-src/responsive-design/SKILL.md` — Mobile-first, breakpoints, fluid grids
+- `skills-src/component-patterns/SKILL.md` — Compound components, design tokens, theming
+- `skills-src/agent-ui-design/SKILL.md` — Chat interfaces, streaming UI, agent UX
 
 ### Visual Design
-- `skills-src/web-typography/SKILL.md` — Schriftwahl, Paarung, Fluid Typography
-- `skills-src/color-theory/SKILL.md` — Farbschemata, 60-30-10, Dark Mode
-- `skills-src/visual-direction/SKILL.md` — Farbpaletten-Archetypen, Trends
+- `skills-src/web-typography/SKILL.md` — Font selection, pairing, fluid typography
+- `skills-src/color-theory/SKILL.md` — Color schemes, 60-30-10, dark mode
+- `skills-src/visual-direction/SKILL.md` — Color palette archetypes, trends
 
 ### Quality & Conversion
-- `skills-src/accessibility/SKILL.md` — WCAG, BFSG, semantisches HTML, ARIA
-- `skills-src/usability/SKILL.md` — Nielsen-Heuristiken, Formulardesign, Conversion
-- `skills-src/landing-pages/SKILL.md` — Conversion-Struktur, CTA, A/B-Testing
+- `skills-src/accessibility/SKILL.md` — WCAG, BFSG, semantic HTML, ARIA
+- `skills-src/usability/SKILL.md` — Nielsen heuristics, form design, conversion
+- `skills-src/landing-pages/SKILL.md` — Conversion structure, CTA, A/B testing
 - `skills-src/webdesign-review/SKILL.md` — Comprehensive design review (all 20 domains)

package/.windsurfrules

@@ -2,7 +2,7 @@
 # This file makes skills discoverable in Windsurf.
 # For detailed skill usage, see individual SKILL.md files.
 
-## Available Skills (21 total from 12 sources)
+## Available Skills
 
 ### Core Design
 - Use `skills-src/ui-design/SKILL.md` for layout, grids, visual hierarchy, components, whitespace
@@ -23,7 +23,7 @@
 ### Strategy & Process
 - Use `skills-src/customer-journey/SKILL.md` for personas, touchpoints, onboarding
 - Use `skills-src/design-process/SKILL.md` for briefing, wireframing, prototyping, handoff
-- Use `skills-src/ai-design-workflow/SKILL.md` for AI/KI integration in design workflow
+- Use `skills-src/ai-design-workflow/SKILL.md` for AI integration in design workflow
 - Use `skills-src/landing-pages/SKILL.md` for conversion structure, CTAs, A/B testing
 - Use `skills-src/website-audit/SKILL.md` for site analysis, relaunch planning, SEO migration
 

package/README.md

@@ -7,7 +7,7 @@
 [![Sources](https://img.shields.io/badge/sources-12-purple?style=flat-square)](scripts/config.yaml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue?style=flat-square)](LICENSE)
 
-**21 opinionated web design skills** distilled from **12 curated sources** (809 pages, 8.1 MB). One build, every major AI coding tool.
+**Opinionated web design skills** distilled from **curated sources**. One install, every major AI coding tool.
 
 ---
 
@@ -80,10 +80,10 @@ ln -sf $(pwd)/skills-src/* ~/.config/opencode/skills/   # OpenCode
 | Core Design | `ui-design`, `ux-design` | Layout, grids, visual hierarchy, IA, interaction patterns |
 | Detail | `web-typography`, `color-theory`, `accessibility` | Font pairing, 60-30-10 rule, WCAG, BFSG compliance |
 | Implementation | `responsive-design`, `navigation-design`, `usability`, `images-media`, `branding-identity` | Mobile-first, menu patterns, forms, SVG, brand strategy |
-| Strategy | `customer-journey`, `design-process`, `ai-design-workflow`, `landing-pages`, `website-audit` | Personas, briefing, KI-workflow, conversion, relaunch |
+| Strategy | `customer-journey`, `design-process`, `ai-design-workflow`, `landing-pages`, `website-audit` | Personas, briefing, AI workflow, conversion, relaunch |
 | Trends & Patterns | `design-trends`, `ui-patterns`, `visual-direction`, `component-patterns`, `agent-ui-design` | Award-winning patterns, Mobbin, Dribbble/Behance, 21st.dev |
 
-All skills are written in **German** (matching source material). Frontmatter names and descriptions are in English (per [Agent Skills spec](https://agentskills.io)).
+All skills follow the [Agent Skills spec](https://agentskills.io) format (YAML frontmatter + Markdown body).
 
 ---
 
@@ -91,7 +91,7 @@ All skills are written in **German** (matching source material). Frontmatter nam
 
 | Tier | Source | Pages | Focus |
 | --- | --- | ---: | --- |
-| 1 (deep) | [webdesign-journal.de](https://www.webdesign-journal.de/) | 30 | UI/UX, typography, color, accessibility, branding, KI |
+| 1 (deep) | [webdesign-journal.de](https://www.webdesign-journal.de/) | 30 | UI/UX, typography, color, accessibility, branding, AI |
 | 1 (deep) | [21st.dev](https://21st.dev/) | 39 | Component patterns, Agents SDK, chat UI |
 | 2 (awards) | [Awwwards](https://www.awwwards.com/) | ~200 | Award-winning sites + their content |
 | 2 (awards) | [CSS Design Awards](https://www.cssdesignawards.com/) | 80 | Website of the Day winners |
@@ -104,96 +104,67 @@ All skills are written in **German** (matching source material). Frontmatter nam
 | 4 (community) | [Behance](https://www.behance.net/) | 20 | Trending projects |
 | 4 (community) | [Mobbin](https://mobbin.com/) | 6 | Real app UI patterns (public) |
 
-**809 pages** across 12 sources, synthesized into a **19-domain Enterprise Design Specification** (3,289 lines).
+**809 pages** across 12 sources, synthesized into a **19-domain Enterprise Design Specification** (3,409 lines).
 
 ---
 
 ## Architecture
 
 ```mermaid
-graph TD
-    subgraph Sources["12 Web Design Sources"]
-        T1["Tier 1: webdesign-journal.de + 21st.dev"]
-        T2["Tier 2: Awwwards + CSSDA + CSS Winner"]
-        T3["Tier 3: Godly + SiteInspire + Lapa.ninja + Land-book"]
-        T4["Tier 4: Dribbble + Behance + Mobbin"]
+graph LR
+    subgraph Sources
+        direction TB
+        T1[Tier 1 — Deep]
+        T2[Tier 2 — Awards]
+        T3[Tier 3 — Galleries]
+        T4[Tier 4 — Community]
     end
 
-    subgraph Scraping["Scraping & Diffing"]
-        S[scrape.py]
-        D[diff-content.py]
-        M[manifest.json]
+    subgraph Pipeline
+        direction TB
+        scrape[scrape.py]
+        diff[diff-content.py]
+        spec[19 Domain Specs]
+        skills[SKILL.md x 21]
+        build[build-skills.py]
     end
 
-    subgraph Spec["Enterprise Design Specification"]
-        CM[content-map.json]
-        DS[19 Domain Files]
+    subgraph Platforms
+        direction TB
+        claude[Claude Code]
+        cursor[Cursor]
+        windsurf[Windsurf]
+        copilot[Copilot]
+        codex[Codex]
+        aider[Aider]
     end
 
-    subgraph Skills["Canonical Skills"]
-        SK[21 SKILL.md + references/]
-    end
-
-    subgraph Build["Build Pipeline"]
-        B[build-skills.py]
-    end
-
-    subgraph Output["Tool-Specific Outputs"]
-        CC[Claude Code]
-        CU[Cursor]
-        WS[Windsurf]
-        GE[Gemini]
-        CO[Codex]
-        AI[Aider]
-    end
-
-    Sources --> S
-    S --> M
-    M --> D
-    D --> CM
-    CM --> DS
-    DS -->|"AI Synthesis"| SK
-    SK --> B
-    B --> CC
-    B --> CU
-    B --> WS
-    B --> GE
-    B --> CO
-    B --> AI
+    Sources --> scrape --> diff --> spec -->|AI Synthesis| skills --> build --> Platforms
 ```
 
 ### Evolution Pipeline
 
 ```mermaid
-sequenceDiagram
-    participant Cron as Weekly Cron
-    participant Scraper as scrape.py
-    participant Differ as diff-content.py
-    participant Map as content-map.json
-    participant Spec as spec/domains/*.md
-    participant Builder as build-skills.py
-    participant Output as output/
-
-    Cron->>Scraper: Trigger (Sundays 3am)
-
-    rect rgb(240, 245, 250)
-    Note over Scraper,Differ: Scrape & Diff Phase
-    Scraper->>Scraper: Crawl 12 sources (tiered)
-    Scraper->>Differ: Updated manifest.json
-    Differ->>Differ: Compare hashes, classify changes
-    Differ-->>Map: Change report (new/updated/removed)
+graph LR
+    cron(Cron — Sundays 3am) --> scrape
+
+    subgraph Scrape & Diff
+        scrape[scrape.py<br/>Crawl 12 sources] --> manifest[(manifest.json)]
+        manifest --> diff[diff-content.py<br/>Compare hashes]
     end
 
-    rect rgb(250, 245, 240)
-    Note over Map,Spec: Domain Mapping Phase
-    Map->>Spec: Identify affected domains
-    Note right of Spec: AI synthesis required<br/>for spec updates
+    subgraph Map & Synthesize
+        diff --> cmap[(content-map.json)]
+        cmap --> domains[spec/domains/*.md<br/>19 domain files]
+        domains -->|AI synthesis| skills[skills-src/<br/>SKILL.md x 21]
     end
 
-    rect rgb(240, 250, 240)
-    Note over Builder,Output: Build Phase
-    Builder->>Output: Rebuild all 6 tool outputs
-    Note right of Output: claude-code, cursor,<br/>windsurf, gemini,<br/>codex, aider
+    subgraph Build & Ship
+        skills --> builder[build-skills.py]
+        builder --> out1[Claude Code]
+        builder --> out2[Cursor]
+        builder --> out3[Windsurf]
+        builder --> out4[+ 6 more]
     end
 ```
 
@@ -218,6 +189,7 @@ frontend-design-skills/
   scripts/                  Build and automation
     build-skills.py         Canonical -> tool-specific outputs
     validate-skills.py      Agent Skills spec validation
+    update-counts.js        Dynamic README badge management
     scrape.py               Tiered source scraper
     diff-content.py         Content change detection
     evolve.py               Evolution pipeline orchestrator

package/bin/cli.js

@@ -218,8 +218,14 @@ function installAll() {
   }
 }
 
+function countSkills() {
+  const skillsDir = path.join(PKG_ROOT, "skills-src");
+  if (!fs.existsSync(skillsDir)) return 0;
+  return fs.readdirSync(skillsDir).filter(d => !d.startsWith("_") && fs.statSync(path.join(skillsDir, d)).isDirectory()).length;
+}
+
 function listSkills() {
-  header("Frontend Design Skills — 21 Skills");
+  header(`Frontend Design Skills — ${countSkills()} Skills`);
 
   const categories = {
     Meta: ["webdesign-review"],
@@ -255,7 +261,7 @@ function listSkills() {
     }
   }
 
-  log(`\n  Total: 21 skills from 12 sources`);
+  log(`\n  Total: ${countSkills()} skills`);
 }
 
 function update() {
@@ -270,7 +276,7 @@ function update() {
 
 function showUsage() {
   console.log(`
-  Frontend Design Skills — 21 web design skills for AI coding tools
+  Frontend Design Skills — web design skills for AI coding tools
 
   Usage:
     npx @flitzrrr/frontend-design-skills <command> [platform]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flitzrrr/frontend-design-skills",
-  "version": "1.0.0",
-  "description": "21 opinionated web design skills from 12 curated sources — one install, every major AI coding tool.",
+  "version": "1.1.0",
+  "description": "Opinionated web design skills from curated sources — one install, every major AI coding tool.",
   "scripts": {
     "test": "node bin/test-cli.js",
     "build": "python3 scripts/build-skills.py",