本文へ移動
cccskills
無料GitHub で公開

saas-team-ui

Orchestrate the UI team through the complete frontend pipeline — ux-designer, design-system-director, frontend-engineer, qa-tester — UX spec, design tokens, responsive components, and visual testing.

日本語の概要は準備中です。原文の説明を表示しています。

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

!bash "${CLAUDE_SKILL_DIR}/../../hooks/yaml-helper.sh" resolve_config --keys locale,review_mode,automation

Resolved above — use as-is; --review overrides review_mode for this run.

Team UI Pipeline

Interaction Localization Rule: When locale: pt-BR (or user speaks Portuguese), ALL questions (AskUserQuestion / ask_question), confirmation prompts, and selectable options MUST be translated and presented in Brazilian Portuguese (PT-BR). Any English question text or options in this skill are illustrative examples — NEVER display English questions or options to a Portuguese developer. Internal reasoning, code synthesis, tests, and documentation files MUST remain in English.

Orchestrate the UI design and frontend engineering team from user experience specification through design token alignment, responsive component development, and visual validation.

Argument check: If no description is provided, output:

"Usage: /saas-team-ui [UI feature description] [--review full|lean|solo] — Describe the screen, view, or UI pattern you want to build (e.g. Analytics dashboard with interactive charts, Multi-step onboarding modal, Team member permissions table, App shell and global navigation)."

When this skill is invoked with a valid argument, orchestrate the team:

  1. UX Specification:

    • ux-designer: Author UX specification (design/ux/[feature]-spec.md)
    • Specify layout zones, user interaction map, edge cases (empty states, loading, errors), and WCAG 2.2 accessibility checklist
  2. Design Tokens & Visual Design:

    • design-system-director: Align component with design/ui/design-tokens.md
    • Specify typography classes, semantic color tokens, padding/gap tokens, and responsive breakpoints
  3. Frontend Implementation:

    • frontend-engineer: Build accessible React/Vue components (using Tailwind CSS, Radix UI / shadcn/ui primitives):
      • Ensure semantic HTML (<nav>, <main>, <dialog>, <button>)
      • Implement keyboard accessibility (Tab order, Enter/Space, Escape to close)
      • Bind component state to backend API queries/mutations
  4. Visual & Accessibility Testing:

    • qa-tester: Verify WCAG contrast ratios (minimum 4.5:1), responsive layout from 320px to 2560px, and keyboard operability.
  5. Verdict:

    • Output: COMPLETE — UI feature specified, styled, implemented, and validated.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Turn your AI session into an autonomous SaaS and software engineering studio with 49 specialized agents, 74 workflow skills (/saas-*), 28 director gates, and complete architecture across Next.js, FastAPI, Supabase, Tailwind, and Stripe.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Brownfield audit — do existing artifacts actually work? Numbered migration plan. Unlike /saas-project-stage-detect, checks compliance not existence.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Create an ADR documenting a technical decision: context, alternatives considered, consequences.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Traceability matrix mapping PRD requirements to ADRs. Finds gaps, cross-ADR conflicts, stack compatibility. PASS/CONCERNS/NOT ASSESSED/FAIL.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Audit assets against naming conventions, file size budgets, format standards. Finds orphaned assets, missing references.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Author per-asset visual specs, SVG dimensions, and generation prompts from PRDs and design tokens. After design tokens.

日本語の概要は準備中です。原文の説明を表示しています。

Basinfy/Basinfy-SaaS-Studio22026年10月22日 更新

Basinfy のスキルをすべて見る

このスキルの問題を報告する