All authors
Claude Skills by ByeongminLee
github.com/ByeongminLee91 skills7 installs179 views
- BrainstormingStructured brainstorming and design process. Enforces exploration and user approval before any implementation. Covers project context analysis, approach proposals, design documentation, and spec review.Votes: 0GitHub stars: 3
- Claude Code GuideAdvanced Claude Code usage guide covering token optimization, memory/context management, subagent architecture, parallelization strategies, verification loops, continuous learning, environment setup, workflow patterns, and agentic security. Use this skill whenever the user asks about Claude Code tips, best practices, workflows, optimization, context management, subagents, parallel work, efficient development setup, CLAUDE.md, hooks, skills creation, session management, or agent security. Also...Votes: 0GitHub stars: 3
- Claude Plugin ReferenceReference guide for major Claude Code plugins and spec-driven development tools. Covers GSD, gstack, Everything Claude Code, Oh My OpenAgent, Superpowers, Vercel Plugin, Spec Kit, and OpenSpec. Use this skill when the user asks about Claude Code plugins, plugin comparisons, spec-driven development (SDD), workflow tools, or wants to learn features from other plugins. Also trigger on keywords like "plugin reference", "GSD", "gstack", "ECC", "superpowers", "spec-kit", "openspec", "SDD", "spec-dr...Votes: 0GitHub stars: 3
- CopywritingWrite persuasive marketing copy for web pages. Covers homepage, landing page, pricing page, and feature page copy with frameworks for headlines, CTAs, and conversion-focused structure.Votes: 0GitHub stars: 3
- Find SkillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.Votes: 0GitHub stars: 3
- Marketing PsychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,' 'behavioral science,' 'why people buy,' 'decision-making,' 'consumer behavior,' 'anchoring,' 'social proof,' 'scarcity,' 'loss aversion,' 'framing,' or 'nudge.' Use this whenever someone wants to understand or leverage how people think and make decisions in a marketing context.Votes: 0GitHub stars: 3
- Plugin TestRun NCC plugin E2E tests. Supports quick (4 projects), full (4+monorepo+modifications), install-test (npx vs marketplace with non-spec-dev focus), or custom test modes. Validates spec→dev flow, skills, hooks, code quality, security, a11y, and token efficiency.Votes: 0GitHub stars: 3
- Pm Product StrategyProduct strategy frameworks for startup and product teams. Covers vision, competitive analysis (Porter, PESTLE), market sizing, SWOT, personas, BMC, Lean Canvas, pricing, PRD, and user stories.Votes: 0GitHub stars: 3
- Skill CreatorCreate new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.Votes: 0GitHub stars: 3
- ArchitecturesArchitecture pattern reference for Next.js & React projects. Covers Flat, Feature-Based, FSD, and Monorepo patterns with core principles, file placement, and import boundaries.Votes: 0GitHub stars: 3
- AuthAuthentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.Votes: 0GitHub stars: 3
- BrainstormExplore and validate feature design before writing specs. Uses Socratic questioning to refine the idea, compares 2-3 approaches with trade-offs, and produces a design summary approved by the user before handing off to /spec.Votes: 0GitHub stars: 3
- CicdSet up or update CI/CD pipeline. Analyzes project stack, git strategy, and test strategy to generate deployment configurations. Uses find-skills for platform-specific guidance.Votes: 0GitHub stars: 3
- Clean CodeThis skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"Votes: 0GitHub stars: 3
- CohesionUse when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 `../../..`처럼 길어질 때Votes: 0GitHub stars: 3
- CommitAnalyze changes and create a commit with auto-generated message following the project's commit convention. Links to feature spec REQ numbers when a feature name is provided.Votes: 0GitHub stars: 3
- CouplingUse when props가 3개 이상 컴포넌트 계층을 통과하거나, 하나의 Hook이 5개 이상 값을 반환하거나, A 수정 시 관련 없는 B가 깨질 때Votes: 0GitHub stars: 3
- CreateIdeation-to-validation pipeline. Asks forcing questions in the user's language, generates alternative approaches, runs C-level review (CEO/CTO/CPO/CMO/CDO), and produces validated concept documents. Optionally converts to /spec input.Votes: 0GitHub stars: 3
- DebugSystematically analyze and fix a bug. Uses hypothesis-driven debugging, records the process in spec/DEBUG.md, and updates spec/STATE.md on resolution.Votes: 0GitHub stars: 3
- DevImplement a feature. Supports resuming interrupted work and team mode (--team flag). Reads spec/feature/[name]/spec.md and design.md, generates PLAN.md inside the feature directory, waits for user confirmation, then implements and verifies the feature.Votes: 0GitHub stars: 3
- Error Handling PatternsMaster error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling, designing APIs, or improving application reliability.Votes: 0GitHub stars: 3
- Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.Votes: 0GitHub stars: 3
- Image OptimizerOptimize images to WebP format. Scans a directory, converts jpg/png/gif/bmp/tiff to WebP using sharp, reports compression results. Run with input/output path arguments.Votes: 0GitHub stars: 3
- InitFirst-time setup. Analyzes the existing codebase and populates spec/PROJECT.md, spec/ARCHITECTURE.md, spec/rules/, and draft feature spec files. Run once after installing FeatureSpec.Votes: 0GitHub stars: 3
- Issue ReporterReport a bug or feature request for the NCC plugin to GitHub. Sanitizes all project-specific and personal information before submission. Always asks for user confirmation before creating the issue. Use when encountering NCC plugin issues, bugs, or wanting to request new features.Votes: 0GitHub stars: 3
- LogAudit and improve logging practices. Review logging for a specific feature, audit the entire project, or set up logging infrastructure.Votes: 0GitHub stars: 3
- LoopForce-complete a feature by looping until all REQs in spec.md are satisfied. Runs reviewer → targeted lead-engineer → re-review cycle. Use after /dev when you want guaranteed spec compliance.Votes: 0GitHub stars: 3
- MockGenerate or update MSW mock handlers and fixtures from feature spec API contracts. Use to set up mock infrastructure, generate feature-specific mocks, or check mock status.Votes: 0GitHub stars: 3
- NextjsNext.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.Votes: 0GitHub stars: 3
- UpstreamNext.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundlingVotes: 0GitHub stars: 3
- ObservabilityVercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events, OpenTelemetry integration, and monitoring dashboards. Use when instrumenting, debugging, or optimizing application performance and user experience on Vercel.Votes: 0GitHub stars: 3
- PrCreate a pull request with auto-generated body from feature spec. Auto-detects target branch from GIT_STRATEGY.md. Optionally updates changelog and bumps version.Votes: 0GitHub stars: 3
- PredictabilityUse when `getX()`나 `fetchX()`에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때Votes: 0GitHub stars: 3
- Product StrategyCreate a comprehensive product strategy using the 9-section Product Strategy Canvas — vision, segments, costs, value propositions, trade-offs, metrics, growth, capabilities, and defensibility. Use when building a product strategy, creating a strategic plan, or defining product direction.Votes: 0GitHub stars: 3
- QaAI-driven browser testing against feature specs. Default mode reads spec REQs and autonomously tests in a real browser via Playwright MCP. Also supports running existing Playwright test files, visual regression, and accessibility audits.Votes: 0GitHub stars: 3
- React Best PracticesReact best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.Votes: 0GitHub stars: 3
- ReadabilityUse when 삼항 연산자가 중첩되거나, 복잡한 조건식 `a && !b || c`가 이름 없이 사용되거나, 동시에 실행되지 않는 코드가 한 컴포넌트에 섞여 있을 때Votes: 0GitHub stars: 3
- ReforgeTransform an existing project into spec-driven development. Analyzes a legacy codebase from an external folder, accepts change specifications, and generates feature specs (spec.md + design.md) that blend existing logic with requested modifications. Auto-runs /init if needed.Votes: 0GitHub stars: 3
- ReviewCheck how well the current implementation matches the feature spec and evaluate code quality. Runs spec compliance review followed by code quality review. Optionally runs unit/integration test audit, logging audit, and security audit when strategy files exist. Does not modify code.Votes: 0GitHub stars: 3
- RuleAdd or update a project coding rule. Rules are stored as individual files in spec/rules/. Use this to define API patterns, component conventions, state management rules, etc.Votes: 0GitHub stars: 3
- SecurityAudit project security posture. Review for OWASP Top 10 vulnerabilities, secrets, injection flaws, and auth gaps. Use --setup to configure security strategy.Votes: 0GitHub stars: 3
- SpecDefine or update a feature specification. Provide a feature name and description with optional Figma link. Updates spec/feature/[name]/spec.md and design.md without touching source code.Votes: 0GitHub stars: 3
- StatusShow current project status. Reads spec/STATE.md to list all tracked features and their phases, then reads each feature's PLAN.md for task progress.Votes: 0GitHub stars: 3
- TestRun tests for a feature based on TEST_STRATEGY.md and feature-level TEST.md. Handles unit/integration test workflows. Use --setup to configure test strategy. Use /qa for browser, visual, and accessibility testing.Votes: 0GitHub stars: 3
- Ui ReferenceUI component library reference guide. Use when building UI without a design, choosing a component library, or looking for animation/effect inspiration. Covers headless, styled, animation, and chart libraries with llms.txt links for AI-readable documentation.Votes: 0GitHub stars: 3
- Vercel Composition PatternsComposition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.Votes: 0GitHub stars: 3
- Vercel React Best PracticesReact 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.Votes: 0GitHub stars: 3
- Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".Votes: 0GitHub stars: 3
- Accessibility- **Perceivable**: Alt text for images, captions for video, sufficient color contrast (4.5:1 min) - **Operable**: Full keyboard navigation, no keyboard traps, skip-to-content links - **Understandable**: Clear labels, error messages with suggestions, consistent navigation - **Robust**: Valid HTML, ARIA roles/states only when native HTML is insufficientVotes: 0GitHub stars: 3
- Agent BrowserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.Votes: 0GitHub stars: 3