J-StaR-Films-Studios/VibeCode-Protocol-Suite

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply when tempted to ask 'should I do X?' on reversible work. Proceed, present the result, let the human course-correct after the fact; reserve confirmation for irreversible actions.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply during planned rewrites and migrations with explicit phase boundaries. Converge on the target architecture; don't preserve smooth intermediate states with throwaway compatibility code.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply after completing a task, before declaring done. Verify against the real artifact (run the feature, read the actual value, inspect the diff), not a proxy, self-report, or 'it compiles.'.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply when integrating a new requirement into an existing design. Redesign as if the requirement had been a foundational assumption from day one, instead of bolting it on.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply when concurrent actors might write to the same file, branch, key, or state object. Eliminate the sharing first; serialize structurally only when one shared writer is a real invariant.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply to multi-step work (sweeps, migrations, runs of similar edits) and to how you stack commits and PRs. Break work into small units that each end in a verifiable state, check each before the next, and order delivery so the sequence proves itself to a reviewer.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply when sequencing an addition, refactor, or rewrite. Remove dead weight, redundant validators, and stub references first, then build on the simpler base.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Apply when designing types, reviewing a function signature, or writing code in any statically-typed language. Make illegal states unrepresentable, brand semantic primitives, parse external data at boundaries, refuse to lie to the compiler, exhaust variants, derive from authoritative schemas.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Use when the user wants to build a React site or app section from 21st.dev components, clone the structure of a reference site with 21st.dev building blocks, browse 21st.dev manually and return copied prompts/code, or says things like "build me a site like this", "use 21st.dev", "copy prompt", "component URL", "hero…

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Use when designing web or mobile UI, creating prototypes, directing or engineering distinctive web experiences, structuring evidence-based web narratives, applying UI/UX guidance, using 21st.dev components, Stitch, or Figma.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex needs its repo

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Analyze a React/TypeScript component for compliance with coding guidelines and suggest improvements.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Use when originating, planning, building, or auditing distinctive creative web experiences. Routes sparse briefs through concept selection before choosing motion, Canvas, WebGL, 3D, or implementation architecture.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → animatics (REST/CLI), and Figma Motion animations + shaders (MCP). Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

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. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when…

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

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.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Google Stitch design platform skill bundle. Covers design system extraction, prompt enhancement, iterative site building, React component conversion, Remotion walkthrough videos, and shadcn/ui component integration. Activate when user mentions Stitch, design-to-code, DESIGN.md, shadcn/ui, or iterative site generation.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude Code

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern.

J-StaR-Films-Studios/VibeCode-Protocol-Suite

Skill Claude CodeCodex

Use when transforming evidence-rich project histories, case studies, launches, research journeys, or retrospectives into truthful narrative structures. Not for inventing greenfield brand concepts from sparse briefs.