feat: integrate ui-skills.com for rule-driven UI development

.github/workflows/deploy.yml

@@ -37,10 +37,10 @@ jobs:
         run: pnpm build
 
       - name: Deploy to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        if: (github.event_name == 'push' || (github.event_name == 'pull_request' && !github.event.pull_request.head.repo.fork)) && secrets.CLOUDFLARE_API_TOKEN != ''
+        uses: cloudflare/pages-action@v2
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: skillscontroller
+          projectName: fastskills
           directory: packages/website/dist
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

@@ -41,3 +41,6 @@
 [submodule "nanobanana-skills"]
 	path = nanobanana-skills
 	url = https://github.com/op7418/NanoBanana-PPT-Skills.git
+[submodule "ui-skills-repo"]
+	path = ui-skills-repo
+	url = https://github.com/ibelick/ui-skills.git

README.md

@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"></a>
-  <a href="#-skills-count--技能统计"><img src="https://img.shields.io/badge/Skills-256+-green" alt="Skills"></a>
+  <a href="#-skills-count--技能统计"><img src="https://img.shields.io/badge/Skills-257+-green" alt="Skills"></a>
   <a href="#-skill-packs--场景化技能包"><img src="https://img.shields.io/badge/Packs-25-blue" alt="Packages"></a>
   <a href="https://astro.build/"><img src="https://img.shields.io/badge/Built_with-Astro-orange" alt="Astro"></a>
   <a href="https://fastskills.xyz"><img src="https://img.shields.io/badge/Website-Live-success" alt="Website"></a>
@@ -121,7 +121,7 @@ Claude 自动分析:
 
 | Metric | Count |
 |--------|-------|
-| Total Skills / 技能总数 | **256+** |
+| Total Skills / 技能总数 | **257+** |
 | Skill Packs / 场景包 | **25** |
 | Categories / 分类 | **20** |
 | Scientific Skills / 科学技能 | **138+** |
@@ -147,6 +147,7 @@ All skills are aggregated from reputable open-source projects. Review before imp
 | [Obsidian Skills](https://github.com/kepano/obsidian-skills) | 160+ | 3 | Knowledge | MIT |
 | [VoltAgent](https://github.com/VoltAgent/voltagent) | - | 10+ | AI Agent | - |
 | [Makepad Skills](https://github.com/ZhangHanDong/makepad-skills) | - | 11 | Rust UI | MIT |
+| [UI Skills](https://github.com/ibelick/ui-skills) | 200+ | 1 | UI/UX Constraints | MIT |
 | [Planning with Files](https://github.com/marovole/planning-with-files) | - | 1 | Planning | MIT |
 
 ---
@@ -157,7 +158,7 @@ All skills are aggregated from reputable open-source projects. Review before imp
 
 | Pack | Icon | Skills | Use Case |
 |------|------|--------|----------|
-| **Frontend Developer** 前端开发 | 🎨 | 6 | UI/UX, components, testing |
+| **Frontend Developer** 前端开发 | 🎨 | 7 | UI/UX, components, testing |
 | **Fullstack Developer** 全栈开发 | ⚡ | 6 | End-to-end development |
 | **Document Production** 文档生产 | 📄 | 6 | Word, PDF, PPT, Excel |
 | **Knowledge Management** 知识管理 | 📓 | 4 | Obsidian, note systems |

package.json

@@ -33,5 +33,8 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.5.1"
+  },
+  "devDependencies": {
+    "wrangler": "^3.101.0"
   }
 }

packages/website/src/data/packages.ts

@@ -195,7 +195,8 @@ export const skillPackages: SkillPackage[] = [
       'modern-frontend-design',
       'theme-factory',
       'brand-guidelines',
-      'canvas-design'
+      'canvas-design',
+      'ui-skills'
     ],
     recommended: false
   },

packages/website/src/data/repo-config.ts

@@ -99,5 +99,11 @@ export const REPO_CONFIG: Record<string, RepoConfig> = {
     url: 'https://github.com/op7418/NanoBanana-PPT-Skills.git',
     rawBase: 'https://raw.githubusercontent.com/op7418/NanoBanana-PPT-Skills/main',
     contentPath: ''
+  },
+  'ui-skills': {
+    path: 'ui-skills-repo',
+    url: 'https://github.com/ibelick/ui-skills.git',
+    rawBase: 'https://raw.githubusercontent.com/ibelick/ui-skills/main',
+    contentPath: '.'
   }
 };

packages/website/src/data/skill-sources.ts

@@ -260,6 +260,8 @@ export const SKILL_TO_SOURCE: Record<string, SkillSource> = {
   'makepad-evolution': { source: 'makepad', path: 'makepad-evolution' },
   // nanobanana ppt skills
   'ppt-generator': { source: 'nanobanana', path: '' },
+  // ui-skills
+  'ui-skills': { source: 'ui-skills', path: '' },
 };
 
 // 根据技能 ID 获取源信息

purevibecoder-skills/ui-skills/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: ui-skills
+description: Opinionated UI/UX constraints for building better interfaces with agents
+---
+
+# UI Skills - Constraint-Based Interface Development
+
+> **Purpose**: Prevent generic AI-generated aesthetics through strict, opinionated constraints.
+> **Source**: https://ui-skills.com by @ibelick
+
+## Core Philosophy
+
+These are **RULES, not suggestions**. Follow them to create distinctive, performant interfaces that avoid the "AI look".
+
+---
+
+## 1. Stack Constraints
+
+### MUST Use
+- **Tailwind CSS defaults** - Don't override without reason
+- **motion/react** for scripting animations
+
+### NEVER Use
+- Custom CSS frameworks that conflict with Tailwind
+- Inline styles for animation (use Tailwind or motion/react)
+
+---
+
+## 2. Component Constraints
+
+### MUST Always
+- Use **accessible component primitives** (e.g., Radix UI, HeadlessUI)
+- Add `aria-label` to icon-only buttons
+- Implement keyboard navigation
+- Use **structural skeletons** for loading states
+
+### NEVER
+- Use `<div>` for clickable elements (use `<button>`)
+- Skip accessibility attributes
+- Rebuild keyboard or focus behavior by hand
+
+---
+
+## 3. Interaction Constraints
+
+### MUST Use
+- **AlertDialog** for destructive or irreversible actions
+- **h-dvh** over **h-screen** for viewport height
+- Ensure **empty states** have one clear next action
+
+### NEVER
+- Confirm destructive actions with simple `confirm()` dialog
+- Use fixed pixel heights for full-screen layouts
+
+---
+
+## 4. Animation Constraints
+
+### MUST Always
+- Animate **only compositor props** (transform, opacity)
+- Ensure interaction feedback **NEVER exceeds 200ms**
+
+### NEVER
+- Animate width, height, or other layout properties
+- Use slow animations (>200ms for feedback)
+
+---
+
+## 5. Typography Constraints
+
+### MUST Use
+- **text-balance** for headings
+- **tabular-nums** for data
+
+### NEVER
+- Leave headings un-balanced (causes orphaned words)
+
+---
+
+## 6. Layout Constraints
+
+### MUST Maintain
+- A **fixed z-index scale** (e.g., 10, 20, 30, 40, 50)
+- **size-x** for square elements
+
+### NEVER
+- Use random z-index values (z-index: 9999)
+- Create z-index conflicts
+
+---
+
+## 7. Performance Constraints
+
+### MUST Avoid
+- Large `blur()` or `backdrop-filter` surfaces (use sparingly)
+
+### NEVER
+- Use `useEffect` for anything that can be expressed as render logic
+- Apply blur to entire page backgrounds
+- Use backdrop-filter on scrollable containers
+
+---
+
+## 8. Design Constraints
+
+### MUST NEVER (Unless Explicitly Requested)
+- Use gradients
+
+### ALWAYS
+- Question gradient usage (are they necessary?)
+- Prefer solid colors or subtle textures
+
+---
+
+## Application Workflow
+
+When building UI/UX:
+
+1. **Review constraints** relevant to the task
+2. **Apply MUST rules** as non-negotiable
+3. **Avoid NEVER patterns** at all costs
+4. **Document exceptions** if client explicitly requests violations
+
+---
+
+## Integration with Other Skills
+
+- **Complements**: `frontend-designer` (creative aesthetics)
+- **Overlaps with**: `ui-ux-pro-max` (design database)
+- **Best paired with**: `react-components`, `modern-frontend-design`
+
+---
+
+## Credits
+
+Original constraints by [@ibelick](https://github.com/ibelick)
+Website: https://ui-skills.com
+Repository: https://github.com/ibelick/ui-skills

skills/fastskills-router/AGENTS.md

@@ -169,6 +169,7 @@ Combine matched routes' skills (dedupe). Output highest-priority matches first.
 | 44 | research-workflow | 深度研究, deep research, 研究执行, research executor | `research-executor, question-refiner, synthesizer` |
 | 43 | problem-solving | 卡住了, stuck, 突破口, breakthrough, 问题解决 | `when-stuck, sequential-thinking` |
 | 42 | data-analysis | 数据分析, data analysis, DataFrame, 探索性分析, EDA, 统计分析, t检验, 回归 | `seaborn, statsmodels, polars, dask, networkx, vaex, exploratory-data-analysis, statistical-analysis` |
+| 41 | ui-constraints | ui约束, ui规则, constraint, opinionated ui, tailwind规则, accessibility rules, 性能约束, performance constraint, compositor, aria, text-balance, alertdialog | `ui-skills` |
 | 41 | ml-advanced | 图神经网络, GNN, UMAP, 降维, 模型解释, 贝叶斯 | `torch_geometric, umap-learn, shap, pymc, pymoo` |
 | 40 | reinforcement-learning | 强化学习, reinforcement learning, RL, PPO, DQN, 代理训练 | `stable-baselines3, pufferlib` |
 | 39 | quantum-computing | 量子计算, quantum computing, 量子电路, qubit, 量子模拟 | `cirq, pennylane, qutip` |

skills/fastskills-router/SKILL.md

@@ -169,6 +169,7 @@ Combine matched routes' skills (dedupe). Output highest-priority matches first.
 | 44 | research-workflow | 深度研究, deep research, 研究执行, research executor | `research-executor, question-refiner, synthesizer` |
 | 43 | problem-solving | 卡住了, stuck, 突破口, breakthrough, 问题解决 | `when-stuck, sequential-thinking` |
 | 42 | data-analysis | 数据分析, data analysis, DataFrame, 探索性分析, EDA, 统计分析, t检验, 回归 | `seaborn, statsmodels, polars, dask, networkx, vaex, exploratory-data-analysis, statistical-analysis` |
+| 41 | ui-constraints | ui约束, ui规则, constraint, opinionated ui, tailwind规则, accessibility rules, 性能约束, performance constraint, compositor, aria, text-balance, alertdialog | `ui-skills` |
 | 41 | ml-advanced | 图神经网络, GNN, UMAP, 降维, 模型解释, 贝叶斯 | `torch_geometric, umap-learn, shap, pymc, pymoo` |
 | 40 | reinforcement-learning | 强化学习, reinforcement learning, RL, PPO, DQN, 代理训练 | `stable-baselines3, pufferlib` |
 | 39 | quantum-computing | 量子计算, quantum computing, 量子电路, qubit, 量子模拟 | `cirq, pennylane, qutip` |

wrangler.toml

@@ -1,3 +1,8 @@
 name = "fastskills"
 compatibility_date = "2025-01-01"
 pages_build_output_dir = "./packages/website/dist"
+
+# Note: If using SSR features that require sessions, add a SESSION KV namespace here
+# [[kv_namespaces]]
+# binding = "SESSION"
+# id = "your-kv-namespace-id"