메뉴
UI component library templates (buttons, forms, cards, modals, etc.). Use when generating frontend UI components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Comprehensive tech stack detection, framework identification, dependency analysis, and project.json generation. Use when analyzing project structure, detecting frameworks, identifying dependencies, discovering AI stack components, detecting databases, or when user mentions project detection, tech stack analysis, framework discovery, or project.json generation.
OpenAPI to Portman to Newman pipeline with auth injection for API contract testing. Use when building API tests from OpenAPI specs, injecting authentication into test collections, running contract tests, or when user mentions OpenAPI, Portman, API contract, Swagger, API testing pipeline, auth injection.
Run and analyze Newman (Postman CLI) tests. Use when running API tests, validating Postman collections, testing HTTP endpoints, or when user mentions Newman, Postman tests, API validation.
Health endpoint and critical path smoke testing patterns. Use when running quick validation tests, checking health endpoints, verifying critical paths respond correctly, or when user mentions smoke testing, health checks, quick validation, sanity checks.
Detection scripts and patterns for identifying test frameworks across all supported languages. Use when detecting test infrastructure, analyzing project testing setup, identifying coverage tools, or when user mentions test detection, framework identification, testing setup analysis.
Architecture design templates, mermaid diagrams, documentation patterns, and validation tools. Use when designing system architecture, creating architecture documentation, generating mermaid diagrams, documenting component relationships, designing data flows, planning deployments, creating API architectures, or when user mentions architecture diagrams, system design, mermaid, architecture documentation, or component design.
| name | component-templates |
| description | UI component library templates (buttons, forms, cards, modals, etc.). Use when generating frontend UI components. |
Identify Component Type:
Select Template:
Generate Component:
Add Variations:
Example 1: Button Component (React + TypeScript)
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline'
size?: 'sm' | 'md' | 'lg'
disabled?: boolean
loading?: boolean
onClick?: () => void
children: React.ReactNode
}
export const Button: React.FC<ButtonProps> = ({
variant = 'primary',
size = 'md',
...props
}) => { /* implementation */ }
Example 2: Input Component (Vue)
<template>
<div class="input-wrapper">
<label :for="id">{{ label }}</label>
<input
:id="id"
:type="type"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>
Purpose: Reusable UI component templates Used by: frontend-generator agent, /component command