메뉴
16-skill, 4-tier, 5-option interactive web architecture with SP-7 scoring algorithm, AI portal gateway, and editorial design system. Every component is also an installable skill.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Unified multi-agent role system. Covers Builder, Coder, Council, Orchestrator, Plan, Researcher, Reviewer, and Scribe personas. Use when coordinating multi-agent workflows with MECE principle and role delegation.
Headless and headful browser automation with natural language control. Saves tokens by delegating all Playwright logic to a dedicated browser automation layer.
Creates iterative improvement cycles that feed deployment metrics and product feedback back into research for the next iteration. Use to close the loop from Zero-to-Revenue workflow and enable continuous product improvement.
Simple hello-world task for demonstrating the SKILL workflow. Returns a deterministic ASCII hello message with timestamp. Use for testing skill activation and validation.
Automatically syncs the system prompt (AGENTS.md) across all git repositories when a new version tag is created. Use to eliminate manual prompt propagation after updates.
AI agent intent classification and skill routing gateway. Classifies natural language queries and routes to the most relevant section with confidence scoring and fallback chains.
| name | design-portal-skills |
| version | 0.2.0 |
| description | 16-skill, 4-tier, 5-option interactive web architecture with SP-7 scoring algorithm, AI portal gateway, and editorial design system. Every component is also an installable skill. |
| author | skill-stack-arch |
| tier | 3 |
| tags | ["architecture","design-system","editorial","animation","sp7","skill-stack","ai-portal","framer-motion"] |
| install | npx skills add skill-stack-arch/design-portal-skills --skill design-portal-skills |
| dependencies | ["ui-ux-pro-max","framer-motion-animator","stitch-loop","21st-dev-registry"] |
A living, navigable architecture that serves as build specification, AI guidance portal, and publishable skill repository. This skill implements the complete "Ink & Vermillion" editorial design system with 16 skills across 4 tiers, 5 design options, and a 7-dimension scoring algorithm (SP-7).
Core Metrics: 16 Skills · 4 Tiers · 5 Options · SP-7 Dimensions · 11 Sections
| ID | Skill | Role |
|---|---|---|
| S01 | Stitch Loop | Autonomous iterative website generation with baton-passing loop |
| S02 | Framer Motion Animator | Production-ready React animations, micro-interactions, spring physics |
| S03 | UI/UX Pro Max | 344+ design resources, style governance, accessibility, creative briefs |
| S04 | 21st.dev Registry | Community React component registry with shadcn CLI |
| ID | Skill | Role |
|---|---|---|
| S05 | GSAP Skills | ScrollTrigger animations, timeline sequencing, pinning, parallax |
| S06 | Remotion Skills | Programmatic infographic-motion video generation |
| S07 | Mermaid Diagrams | Text-based schematic diagram rendering |
| S08 | AntV Chart Viz | 26+ interactive chart types, radar, heatmap, treemap |
| ID | Skill | Role |
|---|---|---|
| S09 | AI Image Gen | 50+ AI models for hero images, mockups, visual assets |
| S10 | shadcn/ui Skill | Interactive table, data table, component scaffolding |
| S11 | Playwright Visual | Screenshot capture, visual regression, cross-browser testing |
| S12 | D3.js Visualization | Custom interactive visualizations, force graphs, heatmaps |
| ID | Skill | Role |
|---|---|---|
| S13 | AI Portal Redirect | AI agent intent classification, skill routing, guided navigation |
| S14 | Stack Prioritizer | 7-dimension scoring algorithm, dependency resolver |
| S15 | Matrix Engine | Comparative matrix rendering, interactive filters, radar viz |
| S16 | Design Algorithm | Stack prioritization computation, result visualization, decision tree |
7 dimensions that evaluate each section's requirements:
| ID | Dimension | Description |
|---|---|---|
| VD | Visual Density | How much visual information the section must convey |
| IR | Interactivity Requirement | Degree of active user engagement beyond passive scrolling |
| DC | Data Complexity | Structural complexity of data the section must display |
| MN | Motion Need | Degree to which animation benefits the section |
| AW | Accessibility Weight | Importance of WCAG compliance and inclusive design |
| AR | AI Redirect Value | How likely an AI agent is to redirect here for guidance |
| CR | Component Reusability | How likely components are to be reused across projects |
| # | Name | Dominant Skill | Philosophy |
|---|---|---|---|
| 1 | The Autopoietic Canvas | Stitch Loop (40%) | Self-evolving design through iterative generation cycles |
| 2 | Kinetic Spatial | Framer Motion (40%) | Motion IS the design language — choreographed interaction |
| 3 | Chromatic Minimal | UI/UX Pro Max (40%) | Precision through restraint — radical minimalism |
| 4 | Glass Depth | 21st.dev Registry (35%) | Architectural layered translucent surfaces |
| 5 | Neo-Industrial | UI/UX Pro Max + FM | Raw structural power — brutalist confidence |
| Token | Light | Dark |
|---|---|---|
| Background | #FAFAF5 (Cream) | #0F0F0E |
| Foreground | #1A1A1A (Ink) | #E8E6DF |
| Primary | #C23616 (Vermillion) | #E74C3C |
| Accent | #2C3E50 | oklch(0.7 0.12 230) |
| Border | #E0DDD5 | #333330 |
| Muted | #F3F1EB | #252523 |
max-width: 1200pxuseReducedMotion() support across all 13 componentsuseSpring, hero parallax with useTransformlayoutId for active nav indicator, AnimatePresence for modalscontent-visibility: auto for below-fold sections@starting-style for dialog/modal animationsinterpolate-size: allow-keywords for accordion expand@property for animatable custom properties@scope for component isolationtext-wrap: balance/pretty for modern typography| # | Section | Component | Dominant Skill |
|---|---|---|---|
| 01 | Master Skill Registry | SkillReference.tsx | shadcn/ui |
| 02 | SP-7 Design Algorithm | DesignAlgorithm.tsx | Design Algorithm |
| 03 | Five Design Options | OptionsShowcase.tsx | Stitch Loop |
| 04 | Comparative Analysis | ComparativeAnalysis.tsx | Matrix Engine |
| 05 | Skill Utilization Heatmap | HeatmapViz.tsx | AntV Chart |
| 06 | Implementation Blueprint | ImplementationBlueprint.tsx | shadcn + Mermaid |
| 07 | AI Portal Gateway | AIPortalGateway.tsx | AI Portal Redirect |
| 08 | Tier Architecture | TierArchitecture.tsx | UI/UX Pro Max |
| 09 | Decision Tree | DecisionTree.tsx | Design Algorithm |
| 10 | Section-to-Skill Mapping | SectionMapping.tsx | Stack Prioritizer |
| 11 | Visual Asset Gallery | VisualGallery.tsx | AI Image Gen |
| # | Finding | Severity | Status |
|---|---|---|---|
| 1 | 2-hop latency | HIGH | Not present — no redirect chains |
| 2 | Silent billing bypass | HIGH | Not applicable — no billing/proxy routes |
| 3 | Dual OAuth | MEDIUM | Fixed — next-auth removed from dependencies |
| 4 | Config path divergence | MEDIUM | Fixed — tailwind.config.ts deleted (v3 dead config) |
| 5 | kiro-cli unversioned | MEDIUM | Not present — no references found |
| 6 | Missing health check | LOW | Fixed — /api/health endpoint with Cache-Control |
#!/bin/bash
# design-portal-skills installer — Complete 16-skill stack
echo "=== Tier 0: Foundation Layer ==="
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
npx @21st-dev/registry install-skill --global
npx skills add https://www.skills.sh/google-labs-code/stitch-skills/stitch-loop
npx skills add https://github.com/patricio0312rev/skills --skill framer-motion-animator
echo "=== Tier 1: Interactive Layer ==="
npx skills add greensock/gsap-skills
npx skills add remotion-dev/skills
npx skills add softaworks/agent-toolkit --skill mermaid-diagrams
npx skills add antvis/chart-visualization-skills
echo "=== Tier 2: Visual Asset Layer ==="
npx skills add skills-shell/skills --skill ai-image-generation
npx skills add shadcn-ui/ui --skill shadcn
npx skills add testdino-hq/playwright-skill
npx skills add antvis/chart-visualization-skills --skill d3-viz
echo "=== Tier 3: Portal Layer (Custom) ==="
ORG_URL=https://github.com/skill-stack-arch/design-portal-skills
npx skills add $ORG_URL --skill ai-portal-redirect
npx skills add $ORG_URL --skill stack-prioritizer
npx skills add $ORG_URL --skill matrix-engine
npx skills add $ORG_URL --skill design-algorithm
echo "=== All 16 skills installed ==="
npx skills add skill-stack-arch/design-portal-skills --skill design-portal-skills
useReducedMotion(), skip links, focus managementsrc/
├── app/
│ ├── page.tsx # Main page with nav, sections, footer
│ ├── layout.tsx # Root layout, fonts, metadata, ThemeProvider
│ ├── globals.css # Design tokens, editorial CSS, dark mode
│ └── api/
│ ├── health/route.ts # Health check endpoint
│ └── route.ts # API root
├── components/
│ ├── HeroSection.tsx # 01 — Hero masthead with parallax
│ ├── SkillReference.tsx # 01 — Master skill registry
│ ├── DesignAlgorithm.tsx # 02 — SP-7 scoring engine
│ ├── OptionsShowcase.tsx # 03 — Five design options
│ ├── ComparativeAnalysis.tsx # 04 — Radar chart + matrix
│ ├── HeatmapViz.tsx # 05 — Skill utilization heatmap
│ ├── ImplementationBlueprint.tsx # 06 — Install sequence
│ ├── AIPortalGateway.tsx # 07 — Intent classification
│ ├── TierArchitecture.tsx # 08 — 4-tier architecture
│ ├── DecisionTree.tsx # 09 — 3-question decision tree
│ ├── SectionMapping.tsx # 10 — Section-to-skill mapping
│ ├── VisualGallery.tsx # 11 — AI-generated concept gallery
│ ├── RadarChartWidget.tsx # Recharts radar (dynamic import)
│ └── ui/ # shadcn/ui components
└── lib/
├── animation-variants.ts # Shared motion variants + springs
├── clipboard.ts # Shared clipboard utility
├── skill-data.ts # All data: skills, options, SP-7, routes
└── utils.ts # cn() utility