Claude Skills by practicajs

github.com/practicajs

24 skillsA× 240 installs0 views

Openspec Apply ChangeAImplement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.ai-agentsgobashVotes: 0GitHub stars: 6
Openspec Archive ChangeAArchive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.ai-agentsbashrailsVotes: 0GitHub stars: 6
Openspec Bulk Archive ChangeAArchive multiple completed changes at once. Use when archiving several parallel changes.testingbashrailsVotes: 0GitHub stars: 6
Openspec Continue ChangeAContinue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.ai-agentsbashrailsVotes: 0GitHub stars: 6
Openspec ExploreAEnter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.ai-agentsgobashVotes: 0GitHub stars: 6
Openspec Ff ChangeAFast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.ai-agentsgobashVotes: 0GitHub stars: 6
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Openspec New ChangeAStart a new OpenSpec change using the experimental artifact workflow. Use when the user wants to create a new feature, fix, or modification with a structured step-by-step approach.ai-agentsbashrailsVotes: 0GitHub stars: 6
Openspec OnboardAGuided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.testingtypescriptgoVotes: 0GitHub stars: 6
Openspec Sync SpecsASync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.ai-agentsgorailsVotes: 0GitHub stars: 6
Openspec Verify ChangeAVerify implementation matches change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving.testingbashVotes: 0GitHub stars: 6
Practica Brand DesignAPractica brand design system with colors, typography, spacing, and component patterns. Use when building or styling any UI for Practica — pages, components, layouts, blog posts, or landing pages. Ensures visual consistency with the established minimal, clean design language.ai-agentsgoVotes: 0GitHub stars: 6
Skill MaintenanceAMaintain the Frontend Testing Skill in this repo. Use when asked to review the skill, run a spec/quality review, install-local (wire one example app to the local marketplace), sync up (an example app → root), install-marketplace (switch the vitest-browser app to the published GitHub marketplace), run a sanity test of the skill end-to-end (single app or the monorepo example, per package), run validate-release (install from GitHub marketplace → sanity → restore) against the vitest-browser app, ...testingrustgoVotes: 0GitHub stars: 6
Css AnimationsACSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.testingjavascriptgoVotes: 0GitHub stars: 6
Hyperframes CliAHyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.ai-agentsgobashVotes: 0GitHub stars: 6
Hyperframes MediaAAsset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.ai-agentspythongoVotes: 0GitHub stars: 6
HyperframesACreate video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (cro...ai-agentsgobashVotes: 0GitHub stars: 6
LottieALottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.ai-agentsgobashVotes: 0GitHub stars: 6
Practica Brand DesignAPractica brand design system with colors, typography, spacing, and component patterns. Use when building or styling any UI for Practica — pages, components, layouts, blog posts, or landing pages. Ensures visual consistency with the established minimal, clean design language.testinggoapiVotes: 0GitHub stars: 6
SlidevACreate and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.developmenttypescriptgoVotes: 0GitHub stars: 6
TypegpuATypeGPU and raw WebGPU adapter patterns for HyperFrames. Use when creating GPU-rendered compositions with TypeGPU, raw WebGPU, WGSL fragment shaders, compute pipelines, liquid glass effects, particle systems, or any canvas layer driven by navigator.gpu that responds to HyperFrames hf-seek events.ai-agentsgoperformanceVotes: 0GitHub stars: 6
WaapiAWeb Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.testingjavascriptgoVotes: 0GitHub stars: 6
TemplatesA<div class="text-2xl font-bold text-[#1a1a1a] tracking-tight mb-3">Test Skill Architecture</div> <div class="relative mx-auto" style="width: 900px; height: 440px;">   <div v-click="[1, 13]" class="absolute flex items-center justify-center bg-[#5BA4CF] rounded-lg shadow-sm text-white font-bold text-sm z-10" style="left: 0px; top: 30px; width: 130px; height: 54px;"> Developer: Feature </div> <div class="absolut...testinggotestingVotes: 0GitHub stars: 6
CommandsASafely apply a small change to the testing skilltestingtestingVotes: 0GitHub stars: 6
Frontend TestingAThe project's unique and mandatory frontend testing playbook, which must be consulted whenever doing anything related to testing and during the plan of any coding session. Without consulting this skill, you might perform things that deviate from the organization's standards.testingbashreactVotes: 0GitHub stars: 6