architecture
Design PM-friendly technical architecture for features. No code, only high-level design decisions.
just now · Uploaded
Detail →
Daily Featured Skills Count
03/24
03/25
03/26
03/27
03/28
03/29
03/30
♾️ Free & Open Source 🛡️ Secure & Worry-Free
Import Skills
design-workflow
Compiler-driven design workflow for designers who use Claude Code to design in Figma. Covers components and full interfaces/screens. Use when a designer wants to: (1) make a new design (spec + compile + execute), (2) fix corrections and learn, (3) ship a completed design, (4) set up the knowledge base, or (5) check status.
1 day ago · Uploaded
Detail →
ux-wise-agent
Activate this skill for any UX, product design, or interaction design reasoning task. Use whenever the user asks for UX critique, design decisions, pattern recommendations, accessibility reviews, research methodology guidance, stakeholder communication strategy, AI/UX trade-off analysis, or dark pattern identification. Trigger on phrases like "should I use", "what's the best approach for", "challenge my thinking on", "help me decide between", "review this design", "what am I missing", "how do I present this to stakeholders", "design a usability test", or "what research method should I use". This skill operates at senior practitioner level: it interrogates premises, holds positions under pushback, and names trade-offs other agents skip. Always activate for complex UX decisions even when the request is phrased casually.
12 hours ago · Uploaded
Detail →
ai-design-team
multi-role ai creative team for brand, content, and design workflows. use when a task involves brief analysis, research, planning, scripting, visual direction, brand design, marketing materials, social media execution, or project coordination across different creative roles.
12 hours ago · Uploaded
Detail →
architecture
This skill should be used when the user asks to design system architecture, make architectural decisions, or translate PRD into technical design
14 hours ago · Uploaded
Detail →
business-card
SVG business card designer that takes contact details and brand preferences, then produces 12 front design concepts with optional back designs, interactive HTML preview galleries, individual card showcases with front/back flip animation, and print-ready SVG exports with bleed area and crop marks. Supports horizontal and vertical orientations, six layout styles (minimal, corporate, creative, elegant, bold, tech), multiple color schemes, QR code placeholders, social media icons, and logo integration. Use this skill whenever the user asks to design a business card, create a name card, make visiting cards, or says "design business card", "buat kad bisnes", "create name card", "reka kad perniagaan", "design kad nama", "I need a business card for X". --- # Business Card Designer
1 hour ago · Uploaded
Detail →
ql-brainstorm
Part of the quantum-loop autonomous development pipeline (brainstorm \u2192 spec \u2192 plan \u2192 execute \u2192 review \u2192 verify). Deep Socratic exploration of a feature idea before implementation. Asks questions one at a time, proposes 2-3 alternative approaches with trade-offs, presents design section-by-section for approval, and saves an approved design document. Use when starting a new feature, exploring an idea, or before writing a spec. Triggers on: brainstorm, explore idea, design this, think through, ql-brainstorm.
1 day ago · Uploaded
Detail →
animation-at-work
Apply web animation principles from Animation at Work by Rachel Nabors. Covers human perception of motion, 12 principles of animation, animation patterns (transitions, supplements, feedback, demonstrations, decorations), CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL, communicating animation with storyboards and motion comps, performance (composite-only properties, will-change, RAIL), accessibility (prefers- reduced-motion, vestibular disorders), and team workflow. Trigger on "animation", "transition", "CSS animation", "keyframe", "easing", "motion design", "web animation", "prefers-reduced-motion", "storyboard", "parallax", "loading animation", "hover effect", "micro-interaction". --- # Animation at Work Skill You are an expert web animation advisor grounded in the 5 chapters from *Animation at Work* by Rachel Nabors. You help in two modes: 1. **Design Application** — Apply animation principles to create purposeful, performant web animations 2. **Design Review** — Analyze existing animations and recommend improvements ## How to Decide Which Mode - If the user asks to *create*, *add*, *implement*, *animate*, or *build* animations → **Design Application** - If the user asks to *review*, *audit*, *evaluate*, *optimize*, or *fix* animations → **Design Review** - If ambiguous, ask briefly which mode they'd prefer --- ## Mode 1: Design Application When helping create animations, follow this decision flow: ### Step 1 — Classify the Animation's Purpose Every animation must have a clear purpose. Classify using these five patterns: | Pattern | Purpose | When to Use | Example | |---------|---------|-------------|---------| | **Transition** | Show state change between views/states | Navigating pages, opening panels, switching tabs | Page slide-in, modal open/close | | **Supplement** | Bring elements into/out of a view that's already in place | Adding items to lists, showing notifications, revealing content | Toast notification slide-in, list item appear
23 hours ago · Uploaded
Detail →
codeck-design
Designer role. Reads outline, generates a single HTML presentation file with CSS design system + JS slide engine + per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides. --- # codeck design ## Role activation Read `$DECK_DIR/diagnosis.md` for the recommended design role and its structural mapping. You are that person. Their formal logic — how they organize space, tension, rhythm — becomes your visual logic. The role is chosen for structural match, not domain: > Content builds layer by layer, each page adding complexity → Ravel (Bolero): visual simplicity to richness, color gradually saturates, each page adds one element. > > Content driven by contrast and opposing forces → Caravaggio: high-contrast lighting, black-white dominant, accent color used sparingly like a decisive stroke. > > Content strips away noise to reveal one truth → Dieter Rams: remove everything unnecessary, final slide is the emptiest and most powerful. Apply their formal logic directly. Don't explain their principles — embody them in every visual choice. If `diagnosis.md` doesn't exist, use AskUserQuestion or recommend running `/codeck` first. ## AskUserQuestion format 1. **Re-ground** — "codeck design, {current step}" 2. **Simplify** — plain language 3. **Recommend** — suggestion + reason 4. **Options** — choices Only state verified facts. For unrendered results, say "will" not "is". ## Setup ```bash DECK_DIR="$HOME/.codeck/projects/$(basename "$(pwd)")" mkdir -p "$DECK_DIR" bash "$HOME/.claude/skills/codeck/scripts/status.sh" "$DECK_DIR" ``` Read `$DECK_DIR/outline.md` — page structure, content points, user intent, note to designer. Read `$D
just now · Uploaded
Detail →
ios26-design
iOS 26 / iPadOS 26 Liquid Glass design system for web and app development. Exact design tokens, component specs, layout patterns, and animation parameters from Apple's official Figma Community Kit.
4 hours ago · Uploaded
Detail →
frontend-design
Create 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.
1 day ago · Uploaded
Detail →
‹
1
›
Skill File Structure Sample (Reference)
skill-sample/ ├─ SKILL.md ⭐ Required: skill entry doc (purpose / usage / examples / deps) ├─ manifest.sample.json ⭐ Recommended: machine-readable metadata (index / validation / autofill) ├─ LICENSE.sample ⭐ Recommended: license & scope (open source / restriction / commercial) ├─ scripts/ │ └─ example-run.py ✅ Runnable example script for quick verification ├─ assets/ │ ├─ example-formatting-guide.md 🧩 Output conventions: layout / structure / style │ └─ example-template.tex 🧩 Templates: quickly generate standardized output └─ references/ 🧩 Knowledge base: methods / guides / best practices ├─ example-ref-structure.md 🧩 Structure reference ├─ example-ref-analysis.md 🧩 Analysis reference └─ example-ref-visuals.md 🧩 Visual reference
More Agent Skills specs Anthropic docs: https://agentskills.io/home
SKILL.md Requirements
├─ ⭐ Required: YAML Frontmatter (must be at top) │ ├─ ⭐ name : unique skill name, follow naming convention │ └─ ⭐ description : include trigger keywords for matching │ ├─ ✅ Optional: Frontmatter extension fields │ ├─ ✅ license : license identifier │ ├─ ✅ compatibility : runtime constraints when needed │ ├─ ✅ metadata : key-value fields (author/version/source_url...) │ └─ 🧩 allowed-tools : tool whitelist (experimental) │ └─ ✅ Recommended: Markdown body (progressive disclosure) ├─ ✅ Overview / Purpose ├─ ✅ When to use ├─ ✅ Step-by-step ├─ ✅ Inputs / Outputs ├─ ✅ Examples ├─ 🧩 Files & References ├─ 🧩 Edge cases ├─ 🧩 Troubleshooting └─ 🧩 Safety notes
Why SkillWink?
Skill files are scattered across GitHub and communities, difficult to search, and hard to evaluate. SkillWink organizes open-source skills into a searchable, filterable library you can directly download and use.
We provide keyword search, version updates, multi-metric ranking (downloads / likes / comments / updates), and open SKILL.md standards. You can also discuss usage and improvements on skill detail pages.
Quick Start:
Import/download skills (.zip/.skill), then place locally:
~/.claude/skills/ (Claude Code)
~/.codex/skills/ (Codex CLI)
One SKILL.md can be reused across tools.
FAQ
Everything you need to know: what skills are, how they work, how to find/import them, and how to contribute.
1. What are Agent Skills?
A skill is a reusable capability package, usually including SKILL.md (purpose/IO/how-to) and optional scripts/templates/examples.
Think of it as a plugin playbook + resource bundle for AI assistants/toolchains.
2. How do Skills work?
Skills use progressive disclosure: load brief metadata first, load full docs only when needed, then execute by guidance.
This keeps agents lightweight while preserving enough context for complex tasks.
3. How can I quickly find the right skill?
Use these three together:
- Semantic search: describe your goal in natural language.
- Multi-filtering: category/tag/author/language/license.
- Sort by downloads/likes/comments/updated to find higher-quality skills.
4. Which import methods are supported?
- Upload archive: .zip / .skill (recommended)
- Upload skills folder
- Import from GitHub repository
Note: file size for all methods should be within 10MB.
5. How to use in Claude / Codex?
Typical paths (may vary by local setup):
- Claude Code：~/.claude/skills/
- Codex CLI：~/.codex/skills/
One SKILL.md can usually be reused across tools.
6. Can one skill be shared across tools?
Yes. Most skills are standardized docs + assets, so they can be reused where format is supported.
Example: retrieval + writing + automation scripts as one workflow.
7. Are these skills safe to use?
Some skills come from public GitHub repositories and some are uploaded by SkillWink creators. Always review code before installing and own your security decisions.
8. Why does it not work after import?
Most common reasons:
- Wrong folder path or nested one level too deep
- Invalid/incomplete SKILL.md fields or format
- Dependencies missing (Python/Node/CLI)
- Tool has not reloaded skills yet
9. Does SkillWink include duplicates/low-quality skills?
We try to avoid that. Use ranking + comments to surface better skills:
- Duplicate skills: compare differences (speed/stability/focus)
- Low quality skills: regularly cleaned up