ai-developer-skill-os 3.1.5 → 5.0.0

package/skills/qk-ui-audit/SKILL.md

@@ -1,66 +1,57 @@
 ---
 name: qk-ui-audit
-version: 3.1.5
-updated: 2026-07-02
+version: 5.0.0
+updated: 2026-07-03
 description: Kiểm toán giao diện (UI) để đảm bảo tính nhất quán, khả năng truy cập (A11y), độ phản hồi (Responsive) và hiệu suất.
 category: validation
-behavior: static-analysis
-intent: review-code
-priority: medium
 tags: [ui, audit, frontend, a11y, responsive]
 platforms: [claude-code, cursor, windsurf, gemini-cli]
-trigger: User asks to check the UI, review styling, or run an audit on a component.
-inputs: [Target UI component, File path]
-outputs: [UI Audit Score, Fix recommendations]
-allowed_tools: [grep_search, read_file]
-pipeline: [analyze, review, validate, complete]
 ---
 
-# 🛠️ qk-ui-audit - Standard Operating Procedure
+# 🛠️ qk-ui-audit
 
-> **Goal:** Kiểm toán chất lượng Giao diện Người dùng (UI QA). Tìm ra các lỗi hiển thị, sự thiếu đồng nhất và vi phạm Accessibility (a11y).
+> **Inheritance:** Kỹ năng này tuân thủ Kiến trúc v5.0 của `framework/KERNEL.md`.
+> Output bắt buộc là Decision Summary.
 
-## 🔄 1. Chain of Thought (SOP)
-
-1. **Analyze (Scan UI):**
-   - Read the UI component's source code.
-   - Look for inline styles (`style={{...}}`) and hardcoded magic numbers (e.g., `px`, `%` instead of standard tokens).
-2. **Review (Consistency & Responsive):**
-   - Check if standard Design System tokens (e.g., Tailwind classes like `p-4`, `text-lg`) are used.
-   - Check for mobile-first implementation (e.g., base classes for mobile, `md:` for desktop).
-3. **Validate (Accessibility - A11y):**
-   - Verify `<img>` tags have `alt` attributes.
-   - Verify `<button>` tags without text have `aria-label`.
-   - Verify interactive `<div>` elements have `role="button"` and `tabIndex`.
-4. **Complete (Report):**
-   - Calculate a rough score (0-100) based on violations.
+---
 
-## 🛡️ 3. Constraints & Rules
+## 🎯 Mission (Scope)
+- ✅ Audit UI/UX, rà soát Design Tokens, A11y, và Responsive.
+- ❌ Do NOT tự tiện sửa code trừ khi user ra lệnh.
 
-- **Audit Only:** Do not modify the code automatically unless the user explicitly requests you to apply the fixes.
-- **Evidence Based:** Point out the exact line number where the violation occurs.
+---
 
-## 🌳 3. Decision Tree
+## ⚙️ Capabilities (Cognitive Pipeline)
+```yaml
+Pipeline:
+  - inference
+  - planning
+  - execution
+  - bias-review
+  - ship-check
+```
 
-```text
-Does the component contain hardcoded `#hex` colors or `px` values?
-  ├── YES → Deduct Consistency score. Recommend using Design Tokens.
-  └── NO → Pass.
+---
 
-Does the component have clickable `<div>` elements?
-  ├── YES → Deduct A11y score. Recommend using `<button>` or adding roles.
-  └── NO → Pass.
+## 🎛️ Dials (Hành vi)
+```yaml
+Dials:
+  - id: aesthetic-vibe
+  - id: strictness
 ```
 
-## 🤝 4. Handoff Pipeline
-
-1. `complete`: Generate the UI Audit Report.
+---
 
-## 📝 5. Output Format
+## 🛡️ Biases (Sửa lỗi mặc định)
+```yaml
+Biases:
+  - id: cosmetic-refactor # (Audit format code thay vì audit UX/Tokens)
+```
 
-Vui lòng trả kết quả bằng Tiếng Việt.
+---
 
-- **Tóm tắt (Summary):** Chấm điểm Giao diện (Score: X/100).
-- **Chi tiết (Changes):** Liệt kê các lỗi Consistency, A11y, Responsive (ghi rõ dòng).
-- **Nguyên nhân (Reasoning):** Tại sao lại đánh lỗi điểm đó.
-- **Hành động tiếp (Next Action):** Hỏi User có muốn tự động sửa các lỗi này không.
+## 🛫 Ship Criteria
+```yaml
+Rules:
+  - id: delegation-only # (Chỉ đọc và Report)
+```

package/skills/qk-ui-system-builder/SKILL.md

@@ -1,47 +1,56 @@
 ---
 name: qk-ui-system-builder
-version: 3.1.5
-updated: 2026-07-02
+version: 5.0.0
+updated: 2026-07-03
 description: Xây dựng và duy trì Design Systems, Token extraction, và các thư viện UI dùng chung.
 category: frontend
-behavior: development
-intent: implement-feature
-priority: medium
 tags: [design-system, tokens, shared-components, storybook]
 platforms: [claude-code, cursor, windsurf, gemini-cli]
-trigger: User asks to create a shared component (Button, Input) or extract a color palette.
-inputs: [UI Requirements]
-outputs: [Shared Components, Design Tokens]
-allowed_tools: [write_to_file, read_file]
-pipeline: [analyze, implement, engineering-standard, validate, complete]
 ---
 
-# 🛠️ qk-ui-system-builder - Standard Operating Procedure
+# 🛠️ qk-ui-system-builder
 
-> **Goal:** Đảm bảo tính Nhất quán Giao diện (Consistency). Quản lý Design Tokens và xây dựng thư viện Shared Components.
+> **Inheritance:** Kỹ năng này tuân thủ Kiến trúc v5.0 của `framework/KERNEL.md`.
+> Output bắt buộc là Decision Summary.
 
-## 🔄 1. Chain of Thought (SOP)
+---
+
+## 🎯 Mission (Scope)
+- ✅ Xây dựng Shared Components (Dumb components).
+- ❌ Do NOT nhét logic API hoặc Fetch data vào core component.
 
-1. **Analyze (Token Extraction):**
-   - Extract raw colors and typography into CSS Variables or Tailwind config.
-2. **Implement (Component Factory):**
-   - Build foundational components (`<Button>`, `<TextInput>`) using generic polymorphic props if possible (e.g., `as="a"` or `as="button"`).
-3. **Validate (Story/Documentation):**
-   - Ensure every variation (primary, secondary, disabled) is accounted for.
+---
 
-## 🛡️ 2. Constraints & Rules
+## ⚙️ Capabilities (Cognitive Pipeline)
+```yaml
+Pipeline:
+  - inference
+  - planning
+  - execution
+  - bias-review
+  - ship-check
+```
 
-- **Stateless:** System UI components should NEVER have their own backend logic or hardcoded strings.
-- **Extendable:** Always allow users to pass `className` and `...props` to the base element.
+---
 
-## 🤝 3. Handoff Pipeline
+## 🎛️ Dials (Hành vi)
+```yaml
+Dials:
+  - id: strictness
+```
 
-1. `engineering-standard`: Verify naming conventions.
-2. `complete`: Output the Design System Report.
+---
 
-## 📝 4. Output Format
+## 🛡️ Biases (Sửa lỗi mặc định)
+```yaml
+Biases:
+  - id: missing-ui-states
+```
 
-Vui lòng trả kết quả bằng Tiếng Việt.
+---
 
-- **Tóm tắt (Summary):** Thư viện Component vừa cập nhật.
-- **Chi tiết (Changes):** Liệt kê các variant (màu sắc, kích cỡ).
+## 🛫 Ship Criteria
+```yaml
+Rules:
+  - id: end-to-end-validation
+```

package/skills/qk-validation-gate/SKILL.md

@@ -1,67 +1,54 @@
 ---
 name: qk-validation-gate
-version: 3.1.5
-updated: 2026-07-02
+version: 5.0.0
+updated: 2026-07-03
 description: Cổng kiểm tra chất lượng bắt buộc (Test, Lint, Security).
 category: validation
-behavior: validation
-intent: validate
-priority: critical
 tags: [ci, testing, linting, security, gatekeeper]
 platforms: [claude-code, cursor, windsurf, gemini-cli]
-trigger: Triggered automatically as the final step in a pipeline, or manually when the user asks to "check the code".
-inputs: [Modified files]
-outputs: [Validation Report (Pass/Fail)]
-allowed_tools: [run_command, grep_search]
-pipeline: [analyze, validate, complete]
 ---
 
-# 🛠️ qk-validation-gate - Standard Operating Procedure
+# 🛠️ qk-validation-gate
 
-> **Goal:** Hoạt động như một "Người Gác Cổng" (Gatekeeper). Đảm bảo không có lỗi cú pháp, vi phạm bảo mật, hoặc code rác nào lọt qua trước khi báo cáo hoàn thành.
+> **Inheritance:** Kỹ năng này tuân thủ Kiến trúc v5.0 của `framework/KERNEL.md`.
+> Output bắt buộc là Decision Summary.
 
-## 🔄 1. Chain of Thought (SOP)
-
-1. **Analyze (Static Sweep):**
-   - Use `grep_search` to scan modified files for garbage code: `console.log(`, `debugger;`, `// TODO`, `@ts-ignore`.
-   - Scan for hardcoded secrets: `API_KEY=`, `Bearer ey...`.
-2. **Validate (Automated Checks):**
-   - Run the Linter: `npm run lint` or `eslint .`.
-   - Run the Type Checker: `tsc --noEmit`.
-   - Run the Tests: `npm run test` (if applicable).
-3. **Complete (Report & Auto-fix):**
-   - If minor lint errors exist, attempt an auto-fix (`npm run lint --fix`).
-   - If tests fail, report the exact failure to the user. Do NOT pretend it passed.
+---
 
-## 🛡️ 3. Constraints & Rules
+## 🎯 Mission (Scope)
+- ✅ Chạy các lệnh kiểm định (Test, Lint) thực tế.
+- ❌ Do NOT giả vờ là test đã pass mà không gọi tool CLI.
 
-- **Zero Tolerance:** A failed test or a TypeScript error means the Gate is FAILED. Do not ignore errors.
-- **No Force:** Never use `--force` or `--no-verify` flags.
-- **Real Execution:** You MUST run the actual CLI commands using `run_command` and wait for the output.
+---
 
-## 🌳 3. Decision Tree
+## ⚙️ Capabilities (Cognitive Pipeline)
+```yaml
+Pipeline:
+  - inference
+  - execution
+  - ship-check
+```
 
-```text
-Did `npm run lint` return errors?
-  ├── YES → Are they auto-fixable?
-  │       ├── YES → Run `npm run lint --fix`.
-  │       └── NO → Manually fix the file and re-run.
-  └── NO → Proceed to Type Checking.
+---
 
-Did `tsc --noEmit` return errors?
-  ├── YES → Fix the TypeScript types. Do NOT use `any` as a shortcut.
-  └── NO → GATE PASSED.
+## 🎛️ Dials (Hành vi)
+```yaml
+Dials:
+  - id: strictness
 ```
 
-## 🤝 4. Handoff Pipeline
-
-1. `complete`: Once all checks pass, output the Validation Report.
+---
 
-## 📝 5. Output Format
+## 🛡️ Biases (Sửa lỗi mặc định)
+```yaml
+Biases:
+  - id: hallucinated-tools
+```
 
-Vui lòng trả kết quả bằng Tiếng Việt.
+---
 
-- **Tóm tắt (Summary):** 🛡️ Đã chạy các cổng kiểm định (Lint, Test, Type).
-- **Chi tiết (Changes):** Liệt kê các lệnh đã chạy và kết quả.
-- **Xác thực (Verification):** Ghi rõ PASS (Xanh) hoặc FAIL (Đỏ).
-- **Rủi ro (Risks):** Có phát hiện code rác / comment tạm thời không.
+## 🛫 Ship Criteria
+```yaml
+Rules:
+  - id: end-to-end-validation
+```

package/taste-skill/.claude-plugin/marketplace.json

@@ -0,0 +1,20 @@
+{
+  "name": "taste-skill",
+  "description": "Taste skill library for Claude Code — frontend design, image-to-code, and aesthetic skills",
+  "owner": {
+    "name": "leonxlnx",
+    "email": ""
+  },
+  "plugins": [
+    {
+      "name": "taste-skill",
+      "description": "Frontend design taste skills including brutalist, minimalist, soft, redesign, stitch, and more",
+      "version": "1.0.0",
+      "source": "./",
+      "author": {
+        "name": "leonxlnx",
+        "email": ""
+      }
+    }
+  ]
+}

package/taste-skill/.claude-plugin/plugin.json

@@ -0,0 +1,19 @@
+{
+  "name": "taste-skill",
+  "description": "Frontend design taste skills including brutalist, minimalist, soft, redesign, stitch, and more",
+  "version": "1.0.0",
+  "author": {
+    "name": "leonxlnx",
+    "email": ""
+  },
+  "homepage": "https://github.com/leonxlnx/taste-skill",
+  "repository": "https://github.com/leonxlnx/taste-skill",
+  "license": "MIT",
+  "keywords": [
+    "skills",
+    "frontend",
+    "design",
+    "taste",
+    "ui"
+  ]
+}

package/taste-skill/.github/FUNDING.yml

@@ -0,0 +1 @@
+github: Leonxlnx

package/taste-skill/.github/copilot-instructions.md

@@ -0,0 +1,11 @@
+# Copilot Instructions: Taste Standard
+
+> **Note:** GitHub Copilot automatically reads this file to set its global behavior. By including this in the `.github` folder, Copilot stops writing generic "slop" code and adheres to the premium Taste Skill standards.
+
+## The "Anti-Slop" Manifesto for Copilot
+
+1. **No Generic UI:** Stop generating default SaaS templates. Use high contrast, strong typographic hierarchy, and extreme care for alignment.
+2. **Premium Whitespace:** Elements need room to breathe. Use proportional `clamp()` spacing over rigid padding.
+3. **Cinematic Motion:** Never use linear easing. All animations must use spring physics (`stiffness: 100, damping: 20` or similar).
+4. **Complete Implementation:** No placeholders. No `// TODO: add actual code here`. Write the full, working implementation every single time.
+5. **Contextual Awareness:** For deep style configurations, read the localized `SKILL.md` files in the `skills/` directory.

package/taste-skill/CHANGELOG.md

@@ -0,0 +1,111 @@
+# Changelog
+
+All notable changes to taste-skill live here. The repo follows SemVer-ish discipline: experimental pre-releases iterate freely; stable releases lock the API.
+
+---
+
+## [Unreleased]
+
+### Repo
+
+- `taste-skill` (install name `design-taste-frontend`) is now **v2 (experimental)**. The previous v1 is preserved as `taste-skill-v1` (install name `design-taste-frontend-v1`).
+- New `CHANGELOG.md` (this file).
+
+---
+
+## v2 (experimental) - the new default for `taste-skill`
+
+v2 (experimental) is a substantial rewrite of the original taste-skill. It keeps the dial-driven philosophy (`DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY`) and adds structure, hard rules, and concrete implementation patterns the agent can actually follow.
+
+**This is a pre-release.** It is the new default install because it is genuinely better than v1, but it is still iterating. Refinements may land in any v2 experimental release. The API (install name, dial names, section structure) will stabilize at v2.0.0 stable.
+
+### What's new in v2 (experimental)
+
+**New sections**
+
+- **§0 Brief Inference** - before any code, the agent reads the room (page kind, vibe words, references, audience, constraints) and declares a one-line design read. Anti-default discipline.
+- **§2 Brief → Design System Map** - when a brief reads as Material / Fluent / Carbon / Polaris / Atlassian / Primer / GOV.UK / USWDS / Bootstrap / Radix / shadcn / Tailwind, reach for the **official** package. When the brief is an aesthetic (glassmorphism, bento, brutalism, editorial, dark tech, aurora, kinetic typography), use web standards and label the implementation honestly. Apple Liquid Glass is documented as an approximation, not an official package.
+- **§8 Dark Mode Protocol** - dual-mode by default, token strategy declared per project, contrast and hierarchy parity enforced.
+- **§11 Redesign Protocol** - mode detection (Greenfield / Preserve / Overhaul), audit before touching, modernisation levers in priority order, what never changes silently (URL structure, nav labels, form field names, brand wordmark, legal copy).
+- **§12 The Block Library (Contract)** - schema for iteratively adding real, source-backed block implementations (hero, feature, social-proof, pricing, cta, footer, portfolio, transition, navigation).
+- **§13 Out of Scope** - explicit list of what taste-skill is NOT for (dashboards, data tables, multi-step forms, code editors, native mobile, realtime collab UIs).
+- **§14 Final Pre-Flight Check** - hard checklist. Every box must honestly pass before shipping.
+
+**Hardened bans (Section 9, "AI Tells")**
+
+- **§9.G Em-Dash Ban (complete)** - zero em-dashes (`—`) anywhere on the page. Headlines, eyebrows, pills, body copy, quotes, attribution, captions, button text, alt text. Use a hyphen (`-`) or restructure the sentence. This was the single most-violated stylistic Tell in pre-v2 testing.
+- Section numbering eyebrows (`00 / INDEX`, `001 · Capabilities`, `06 · how it works`) banned outright.
+- Version labels in hero (`V0.6`, `INVITE-ONLY PREVIEW`, `BETA`) banned unless the brief is explicitly a product launch.
+- Photo-credit captions as decoration (`Field study no. 12 · Ines Caetano`) banned unless real attribution.
+- Decoration text strips at hero bottom (`BRAND. MOTION. SPATIAL.`) banned.
+- Pills / labels overlaid on images banned.
+- Version footers (`v1.4.2`, `Build 0048`) banned on marketing pages.
+- Locale / city-name / time / weather strips (`Lisbon, working with founders`) banned for 99% of briefs.
+- Scroll cues (`Scroll`, `↓ scroll`, `Scroll to explore`) banned.
+- Zero decorative status dots by default.
+- `border-t` + `border-b` on every row of long lists banned (use a different UI component).
+- Scoring / progress bars with filled background tracks banned as comparison visuals.
+- Div-based fake product UI (fake task lists / dashboards / terminals built from styled divs) banned.
+- Floating top-right sub-text in section headings banned.
+- Hand-rolled SVG icons strongly discouraged; use Phosphor / HugeIcons / Radix / Tabler.
+
+**Hardened design rules**
+
+- **Color Consistency Lock** - one accent across the whole page; no random color swaps in section 7.
+- **Shape Consistency Lock** - one corner-radius system per page.
+- **Button Contrast Check** - every CTA passes WCAG AA contrast (no white-on-white).
+- **Hero Discipline** - headline ≤ 2 lines, subtext ≤ 20 words and ≤ 4 lines, CTAs visible without scroll, font scale planned with image size.
+- **Navigation** - single line at desktop, height ≤ 80px.
+- **"Used by / Trusted by"** logo wall lives UNDER the hero, uses real SVG logos (Simple Icons / devicon), never plain text wordmarks.
+- **Section-Layout-Repetition Ban** - across 8 sections, at least 4 different layout families.
+- **Bento Cell Count Rule** - N items = exactly N cells; no empty middle or trailing cells.
+- **Page Theme Lock** - one theme (light / dark / auto) for the whole page; no mid-page light/dark flips.
+- **Italic Descender Clearance** - italic display words with `y g j p q` need `leading-[1.1]` minimum and `pb-1` reserve.
+- **Long lists need a different UI component** - `<ul>` + `divide-y` for > 5 items is the lazy default; reach for cards / tabs / marquee / carousel / scroll-snap pills.
+- **Long-list-divider-overuse banned** - no `border-t` + `border-b` on every row.
+
+**Animation discipline**
+
+- Motion library standardised on **Motion** (`motion/react`, the rebrand of Framer Motion). Legacy `framer-motion` package still works as alias.
+- **§5.A GSAP Sticky-Stack** - canonical code skeleton (`start: "top top"`, `pin: true`, `scrub: true`, transform driven by NEXT card's trigger).
+- **§5.B GSAP Horizontal-Pan** - canonical code skeleton (`start: "top top"`, `pin: true`, `end: "+=" + distance`, `scrub: 1`).
+- **§5.C Scroll-Reveal Stagger** - lighter Motion-only pattern using `whileInView`. Use this for simple reveals; save GSAP for actual pinning/scrubbing.
+- **§5.D Forbidden Animation Patterns** - `window.addEventListener('scroll')`, custom scroll calculations in React state, `requestAnimationFrame` loops touching React state. Banned outright.
+- **Reduced motion mandatory** for anything `MOTION_INTENSITY > 3` - wrap in `useReducedMotion()` or `@media (prefers-reduced-motion: reduce)`.
+- **"Motion claimed, motion shown"** - pages claiming `MOTION_INTENSITY > 4` must actually animate; otherwise drop the dial to 3 and ship clean static.
+
+**Stack updates**
+
+- Tailwind v4 default; v3 only when the existing project demands it.
+- Motion replaces Framer Motion as the recommended import path.
+- Icons: Phosphor / HugeIcons / Radix / Tabler (in priority order). Lucide discouraged. Hand-rolled SVG icons banned.
+
+### What's the same
+
+- Three dials (`DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY`) - same spirit, expanded with preset matrix and inference rules.
+- Anti-slop philosophy - same direction, harder enforcement.
+- Performance guardrails - `transform`/`opacity` only, no `top/left/width/height` animation, hardware acceleration.
+
+### Why we made v2 (experimental) the new default
+
+Pre-v2, the original taste-skill set the right direction but was easy for agents to skim past. Production testing showed the same Tells emerging across builds (em-dash everywhere, section-number eyebrows, "Quietly in use at", decorative dots, fake screenshots out of styled divs, broken GSAP scroll triggers).
+
+v2 closes those gaps with hard rules, canonical code skeletons, and a pre-flight checklist the agent must run. It is the version we now recommend.
+
+### How to pin to v1 if you need it
+
+```bash
+npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
+```
+
+This installs the original SKILL.md unchanged.
+
+### Stability note
+
+v2 (experimental) is the new default AND it is actively iterating. Refinements may land in any pre-release while we converge on v2.0.0 stable. Breaking changes (rename of install name, removal of sections) will be batched and called out clearly when v2.0.0 stable cuts.
+
+---
+
+## v1 - the original taste-skill
+
+The original release. Dial-driven philosophy, anti-slop rules, reference vocabulary of pattern names. Preserved at `skills/taste-skill-v1/` and installable as `design-taste-frontend-v1`.

package/taste-skill/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leonxlnx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.