sc-design

Q: How do I install sc-design?

Run npx skills add https://github.com/tony363/superclaude --skill sc-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sc-design/ (personal) or .claude/skills/sc-design/ (project).

by tony363Frontend & Design

Design system architecture, APIs, and component interfaces with comprehensive specifications. Use when planning architecture, designing APIs, creating component interfaces, or modeling databases.

Installs: 113
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/tony363/superclaude --skill sc-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads sc-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

System & Component Design Skill

Architecture planning and interface design with industry best practices.

Quick Start

# Architecture design
/sc:design [target] --type architecture

# API specification
/sc:design payment-api --type api --format spec

# Database schema
/sc:design e-commerce --type database --format diagram

Behavioral Flow

Analyze - Examine requirements and existing system context
Plan - Define design approach based on type and format
Design - Create specifications with best practices
Validate - Ensure maintainability and scalability
Document - Generate diagrams and specifications

Flags

Flag	Type	Default	Description
`--type`	string	architecture	architecture, api, component, database
`--format`	string	spec	diagram, spec, code

Evidence Requirements

This skill does NOT require hard evidence. Deliverables are:

Design specifications and diagrams
Interface definitions
Schema documentation

Design Types

Architecture (`--type architecture`)

System structure and component relationships
Scalability and reliability patterns
Service boundaries and communication

API (`--type api`)

RESTful/GraphQL endpoint design
Request/response schemas
Authentication and versioning

Component (`--type component`)

Interface contracts and dependencies
State management patterns
Integration points

Database (`--type database`)

Entity relationships and constraints
Normalization and indexing
Performance considerations

Output Formats

Diagram (`--format diagram`)

ASCII or Mermaid diagrams
Component relationship visualization
Data flow representation

Specification (`--format spec`)

OpenAPI/Swagger for APIs
Detailed interface documentation
Technical requirements

Code (`--format code`)

Interface definitions
Type declarations
Skeleton implementations

Examples

System Architecture

/sc:design user-management --type architecture --format diagram
# Component relationships, data flow, scalability patterns

API Design

/sc:design payment-api --type api --format spec
# OpenAPI spec with endpoints, schemas, auth patterns

Component Interface

/sc:design notification-service --type component --format code
# TypeScript/Python interfaces with clear contracts

Database Schema

/sc:design inventory-db --type database --format diagram
# ER diagrams with relationships and constraints

MCP Integration

PAL MCP (Design Validation)

Tool	When to Use	Purpose
`mcp__pal__planner`	Architecture planning	Sequential planning with branching for design decisions
`mcp__pal__consensus`	Design decisions	Multi-model validation of architectural choices
`mcp__pal__thinkdeep`	Complex systems	Deep analysis of system requirements
`mcp__pal__chat`	Brainstorming	Collaborative design exploration
`mcp__pal__apilookup`	API standards	Get current API design best practices

PAL Usage Patterns

# Architecture planning
mcp__pal__planner(
    step="Designing microservices architecture for e-commerce platform",
    step_number=1,
    total_steps=4,
    more_steps_needed=True
)

# Validate design with consensus
mcp__pal__consensus(
    models=[
        {"model": "gpt-5.2", "stance": "for"},
        {"model": "gemini-3-pro", "stance": "against"},
        {"model": "deepseek", "stance": "neutral"}
    ],
    step="Evaluate: Should we use event sourcing for the order management system?"
)

# Deep system analysis
mcp__pal__thinkdeep(
    step="Analyzing scalability requirements for real-time notification system",
    hypothesis="WebSocket with Redis pub/sub will handle 100k concurrent users",
    confidence="medium",
    focus_areas=["scalability", "reliability", "performance"]
)

Rube MCP (Documentation & Collaboration)

Tool	When to Use	Purpose
`mcp__rube__RUBE_SEARCH_TOOLS`	External tools	Find diagramming, documentation tools
`mcp__rube__RUBE_MULTI_EXECUTE_TOOL`	Share designs	Post to Notion, Confluence, Slack
`mcp__rube__RUBE_CREATE_UPDATE_RECIPE`	Design workflows	Save reusable design processes

Rube Usage Patterns

# Create design document in Notion
mcp__rube__RUBE_SEARCH_TOOLS(queries=[
    {"use_case": "create notion page", "known_fields": "database:Architecture"}
])

mcp__rube__RUBE_MULTI_EXECUTE_TOOL(tools=[
    {"tool_slug": "NOTION_CREATE_PAGE", "arguments": {
        "title": "Payment API Design v2",
        "content": "## Overview\n..."
    }}
])

# Share design for review
mcp__rube__RUBE_MULTI_EXECUTE_TOOL(tools=[
    {"tool_slug": "SLACK_SEND_MESSAGE", "arguments": {
        "channel": "#architecture",
        "text": "New design ready for review: Payment API v2"
    }},
    {"tool_slug": "JIRA_CREATE_ISSUE", "arguments": {
        "project": "ARCH",
        "summary": "Review: Payment API Design",
        "issue_type": "Task"
    }}
])

Flags (Extended)

Flag	Type	Default	Description
`--pal-plan`	bool	false	Use PAL planner for systematic design
`--consensus`	bool	false	Validate design with multi-model consensus
`--share`	string	-	Share via Rube (notion, confluence, slack)
`--create-ticket`	bool	false	Create review ticket via Rube

Tool Coordination

Read - Requirements analysis
Grep/Glob - Pattern analysis
Write - Design documentation
Bash - External tool integration
PAL MCP - Design planning, consensus validation, deep analysis
Rube MCP - Documentation sharing, collaboration, review workflows

FAQ

What does the sc-design skill do?

Design system architecture, APIs, and component interfaces with comprehensive specifications. Use when planning architecture, designing APIs, creating component interfaces, or modeling databases.

How do I install sc-design?

Run npx skills add https://github.com/tony363/superclaude --skill sc-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sc-design/ (personal) or .claude/skills/sc-design/ (project).

Which AI agents can use sc-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is sc-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains sc-design?

It is published by tony363 in tony363/superclaude. It has 113 recorded installs.

More from tony363/superclaude

View all →

agent-performance-engineer

tony363/superclaude

Expert performance engineer specializing in system optimization, bottleneck identification, and scalability engineering. Masters performance testing, profiling, and tuning across applications, databases, and infrastructure with focus on achieving optimal response times and resource efficiency.

Code Quality & Workflow555 installs

agent-security-engineer

tony363/superclaude

Expert infrastructure security engineer specializing in DevSecOps, cloud security, and compliance frameworks. Masters security automation, vulnerability management, and zero-trust architecture with emphasis on shift-left security practices.

Security392 installs

sc-estimate

tony363/superclaude

Provide development estimates for tasks, features, or projects with intelligent analysis. Use when planning timelines, assessing complexity, or scoping resources.

Code Quality & Workflow184 installs

agent-fullstack-developer

tony363/superclaude

End-to-end feature owner with expertise across the entire stack. Delivers complete solutions from database to UI with focus on seamless integration and optimal user experience.

Frontend & Design154 installs

agent-technical-writer

tony363/superclaude

Open the skill to read its SKILL.md instructions.

Docs & Writing108 installs

agent-react-specialist

tony363/superclaude

Expert React specialist mastering React 18+ with modern patterns and ecosystem. Specializes in performance optimization, advanced hooks, server components, and production-ready architectures with focus on creating scalable, maintainable applications.

Frontend & Design107 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

sc-design

Install

Install

Describe the task

Review the result

SKILL.md

System & Component Design Skill

Quick Start

Behavioral Flow

Flags

Evidence Requirements

Design Types

Architecture (--type architecture)

API (--type api)

Component (--type component)

Database (--type database)

Output Formats

Diagram (--format diagram)

Specification (--format spec)

Code (--format code)

Examples

System Architecture

API Design

Component Interface

Database Schema

MCP Integration

PAL MCP (Design Validation)

PAL Usage Patterns

Rube MCP (Documentation & Collaboration)

Rube Usage Patterns

Flags (Extended)

Tool Coordination

FAQ

More from tony363/superclaude

Popular frontend & design skills

Architecture (`--type architecture`)

API (`--type api`)

Component (`--type component`)

Database (`--type database`)

Diagram (`--format diagram`)

Specification (`--format spec`)

Code (`--format code`)