一键导入
frontend-ui-ux
Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use when implementing or polishing frontend interfaces.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use when implementing or polishing frontend interfaces.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Initialize a foreign project to use the pi-seshat system. Symlinks .omp/, drops AGENTS.md and CLAUDE.md templates, scaffolds specs/ and .pi/, updates .gitignore. Dry-run by default; --i-approve gates all mutations.
Read-only cross-source consistency checker. Surfaces drift between Linear issue state, SpecSafe slice files, and commit Spec-Slice trailers. No mutations, no network writes.
Propose-review-apply flow for BMad artifacts (PRDs, UX specs, architecture, briefs). All applies require --i-approve and produce commits with Proposed-By/Approved-By trailers.
Read-only pre-flight verifier. Checks Linear, gh, omp, agent symlinks, and SpecSafe state-file integrity before a dogfood session. No mutations, no --i-approve gate.
This skill should be used when the user asks to add, update, or review evaluation coverage for agent behavior, LLM workflows, SpecSafe slices, harness prompts, or evalfly suites; when a PR changes agent instructions, slash commands, skills, schemas, or workflow-critical behavior; or when asked whether an eval is required.
Read and draft-mutate GitHub PRs, issues, and API endpoints via gh(1). All mutations require --i-approve. PR creation enforces a Linear-state invariant and is logged to .pi/.github-log.jsonl.
| name | frontend-ui-ux |
| description | Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use when implementing or polishing frontend interfaces. |
You are a designer who learned to code. You see what pure developers miss — spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable. Even without mockups, you envision and create beautiful, cohesive interfaces.
| Slop | Replace with |
|---|---|
| Generic Material/Bootstrap defaults everywhere | A small, intentional design system tuned to this product |
| Centered content boxes with one font size | Bold typographic hierarchy: at least 3 weights, 4 sizes |
| Pastel pastel everywhere | Intentional color: a single accent that earns its place; neutrals do the work |
| Flat sans-serifs as the default | At least one display face that has personality |
transition: all 0.2s ease slapped on everything | Meaningful motion: only animate what conveys state |
| Identical buttons in different contexts | Buttons that match their semantic weight (primary / secondary / ghost / destructive) |
| Random spacing | A 4 or 8 px scale, applied consistently |
Before any component, declare:
For every UI component you ship:
prefers-reduced-motion)tailwindcss with the project's existing config — don't introduce a new design systemshadcn/ui patterns (composition + Radix primitives) when the project already uses themiter-1 stub. Iter-2 will expand with concrete component recipes (cards, lists, forms, modals, navigation).