القائمة
Hypha UI stack: Tailwind CSS 4, shadcn/ui, Radix UI colors. Use when working with packages/ui, design tokens, component specs, or styling in hypha-web.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | hypha-ui-stack |
| description | Hypha UI stack: Tailwind CSS 4, shadcn/ui, Radix UI colors. Use when working with packages/ui, design tokens, component specs, or styling in hypha-web. |
The hypha-web design system is built on Tailwind CSS 4, shadcn/ui, and Radix UI colors. All UI work must align with these technologies.
tailwindcss ^4.0.8@theme in packages/ui-utils/src/global.css — no tailwind.config.js@import 'tailwindcss' with @source for content scanning@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *))@theme blocks for design tokens; utilities map to CSS variables.--color-* in @theme → bg-accent-9, text-foreground--spacing-* → p-4, gap-5--radius-sm, --radius-md, --radius-lgbg-accent-9 not bg-[#123]pnpm add-component (runs shadcn@latest add in packages/ui)packages/ui/src/ — atoms, molecules, organismscn() from @hypha-platform/ui-utils for class mergingcva() for variant/size logic; compound variants for combinationsvariant: default, size: default, colorVariant: accentaccent, neutral, error, success (see button.tsx)| Step | Use |
|---|---|
| 1–2 | App backgrounds, subtle surfaces |
| 3–5 | Interactive component backgrounds |
| 6–8 | Borders, separators |
| 9–10 | Solid backgrounds (buttons, badges) |
| 11–12 | Text (low/high contrast) |
bg-accent-9 for primary buttons; bg-accent-2 for hover surfacestext-accent-11 for links; text-accent-12 for strong emphasis--accent-contrast for text on accent backgroundspackages/ui-utils/src/global.css — full theme and tokenspackages/ui-utils/src/theme/ — color CSS filespackages/ui/src/button.tsx — variant pattern referenceMaintain AI proposal discovery and form preparation when adding or updating Agreements create routes. Use when adding a new proposal type, changing create form fields, or updating select-create-action / select-settings-action menus.
Scaffold an SDD ticket workspace when starting a new unit of work. Reads the developer config, classifies the task, picks the SDD level, and creates the ticket folder in hypha-context. Trigger when the developer says: 'I'm starting #X', 'let's begin <ticket>', 'new task', or 'starting work on X'. (To resume an in-progress ticket use hypha-task-resume. To wrap up use hypha-checkpoint.)
Read or update Hypha's GitHub issues, PRs, and project board (#14 "Hypha Platform — Active Work") via the gh CLI. Use when a technical developer (github.enabled in their config) says "update the board", "sync this to GitHub", "move
Read or update Hypha's GitHub issues, PRs, and project board (#14 "Hypha Platform — Active Work") via the gh CLI. Use when a technical developer (github.enabled in their config) says "update the board", "sync this to GitHub", "move
Draft a shareable summary of work — a daily update, a spec brief for the team, or a focused issue to run by the team. Three auto-detected modes: daily (recent work + next steps), spec (spec summary + acceptance criteria), issue (specific topic to raise). Writes to .hypha-context.local/briefs/ (local draft — developer decides what to share). Trigger when someone says: 'generate a brief', 'draft something to share', 'share my daily update', 'brief the team on this spec', 'I want to run this by the team', or 'create a brief for the team call'.
Surface an idea, observation, or proposal for team discussion without owning the improvement — creates a committed entry in the shared feedback/ folder in hypha-context. Two flavors: internal (engaged dev flagging something to discuss collectively) or external (any contributor providing input for engaged devs to act on). Trigger when someone says: 'flag this for the team', 'I have feedback on X', 'log this idea without a ticket', 'note this for discussion', 'I want to surface this but not own it'.