Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
boraoztuncSkillboraoztunc/skills/tailwind-v4/SKILL.md
Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety. Use when writing Tailwind utilities, setting up or upgrading Tailwind, defining design tokens as Tailwind theme values, debugging classes that do not generate, or when unsure whether a project is on v3 or v4.
boraoztuncSkillboraoztunc/skills/thinking-orbs/SKILL.md
Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generation, or tool-running interface needs a semantic working, searching, solving, listening, composing, or shaping state; when replacing a generic spinner with an AI activity orb; or when implementing the library's size, theme, speed, pause, reduced-motion, and canvas behavior.
boraoztuncSkillboraoztunc/skills/three/SKILL.md
Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.
boraoztuncSkillboraoztunc/skills/typegpu/SKILL.md
TypeGPU 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.
boraoztuncSkillboraoztunc/skills/vercel-react-best-practices/SKILL.md
React 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.
Often used withdep-refsvercel-composition-patternsnext-upgrade
boraoztuncSkillboraoztunc/skills/visual-style-presets/SKILL.md
Pick and apply a complete visual style direction — surface ladder, type scale, accent discipline, and one signature structural motif — for a website, landing page, dashboard, or app shell. Use when asked for a specific look such as dark glass, dark technical, frosted workspace, warm paper, beige minimal, editorial grid, archival book, wireframe diagnostic, cobalt contrast, or "make it feel premium/expensive/engineered", or when a design needs a coherent direction rather than ad-hoc styling.
boraoztuncSkillboraoztunc/skills/waapi/SKILL.md
Web 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.
boraoztuncSkillboraoztunc/skills/web-design-guidelines/SKILL.md
Review 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".
Often used withintelligent-routingvercel-optimizevercel-composition-patterns
boraoztuncSkillboraoztunc/skills/webgl-laser/SKILL.md
Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.
boraoztuncSkillboraoztunc/skills/website-to-hyperframes/SKILL.md
Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Open a skill to see its discussion. Reports from people and their agents are coming.
