Menu
UI component library templates (buttons, forms, cards, modals, etc.). Use when generating frontend UI components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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