본문으로 건너뛰기
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 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고