Not in the top 1,000 by GitHub stars
touchine-ojo/OJO-Design-Skills
Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and more.
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
skills/app-ui-ux-best-practices/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
fbd2c2d158e5 → 3ef911afdc60
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → fbd2c2d158e5
No earlier version was observed for comparison.
skills/pixel-paper-editorial/SKILL.md
Week of Nov 2, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → 3ef911afdc60
No earlier version was observed for comparison.
175GitHub stars
6stars in 7 days
2skills in this repository
1commit in 30 days
Heat
6.2- Star growth, last 7 daysNot available
- Star growth, last 24 hoursNot available
- Rank movement, last 7 daysNot available
- Commits, last 30 daysNot available
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekNot available
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
30-day change not yet available: not enough history.
Individual skills in this repository
- app-ui-ux-best-practices
skills/app-ui-ux-best-practices - pixel-paper-editorial
skills/pixel-paper-editorial
How it works
app-ui-ux-best-practices
When your agent uses it
Comprehensive App UI/UX design best practices. Supports two tracks: Convention Track (adopt a proven design language for SaaS/utility products) and Innovation Track (multiple brand-driven design methodologies — Material Metaphor, archetype-driven, narrative-driven, cultural-semiotic — for brand-driven products). Use when users want to: (1) Define visual identity for a new product, (2) Create design specifications and tokens, (3) Establish UI component guidelines, (4) Build a cohesive design language, (5) Review UI/UX quality, (6) Refine existing designs, (7) Audit design quality. Triggers: 'design system', 'UI design', 'UX design', 'visual identity', 'design specs', 'design tokens', 'component guidelines', 'look and feel', 'app design', 'design refine', 'design audit', '视觉设计', '设计规范', '设计系统', 'UI最佳实践', 'UX最佳实践'.
What it loads into context
Frontmatter
214 tokensAlways available to the agent
SKILL.md
8,286 tokensWhen the skill is activated
Reference documents
47,036 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Core Design Philosophy
- Style Register Derivation (Fit Before Diversity)
- Language Rule (HIGHEST PRIORITY - STRICTLY ENFORCED)
- Pre-Execution (Required Before Any Step)
- Workflow Overview
- Agent Usage Context
- General Skill Mode Override
- Step 0: Product Type Assessment (Before Any Design)
- Step 1: Inspiration Research (MANDATORY)
- Style Direction Confirmation (MANDATORY — Both Tracks)
- Step 2: Insight Discovery (Brand-First, NOT Industry-First) — Innovation Track Only
- Step 3: Brand-Driven Methodology — Innovation Track Only
- Step 4: Design Tokens
- Step 5: Component Recipes
- Step 6: Motion & Behavior
- Step 7: Layout Requirements
- Step 8: Design Specs Output
- Post-Completion: What Happens After `generate_visual_dna`
- Style Guardrails (Global)
Files
SKILL.mdcore38,124 bytesSKILL.mdcore38,124 bytesSKILL.mdcore38,124 bytesreferences/anti-patterns.mddoc49,603 bytesreferences/component-libraries.mddoc11,357 bytesreferences/component-recipe.mddoc26,029 bytesreferences/design-audit.mddoc20,505 bytesreferences/hero-enrichment.mddoc19,624 bytesreferences/icon-guidelines.mddoc4,283 bytesreferences/material-metaphor.mddoc17,677 bytesreferences/motion-system.mddoc23,517 bytesreferences/visual-tokens.mddoc19,483 bytes
Read SKILL.md
# App UI/UX Best Practices
Create cohesive, professional UI design systems. For brand-driven products, pick a methodology that fits the brand — **Material Metaphor**, **archetype-driven**, **narrative-driven**, **cultural-semiotic**, or another approach grounded in research. For utility/SaaS products, adopt one proven design language directly (chosen from a wide pool, not a fixed shortlist). Both paths produce actionable design specifications.
## Core Design Philosophy
**ISFP Designer Persona:** Approach every design decision as a sensory, instinct-driven act. Trust aesthetic intuition. Every pixel must earn its place through visual contribution, not just functional necessity.
**Intentionality:** Nothing is arbitrary. Every color, shadow, radius, and spacing value must serve a clear purpose within the chosen visual direction.
**Surprise within coherence:** The interface should feel familiar enough to use without friction, yet surprising enough to be memorable. Avoid generic patterns while maintaining usability.
**Material honesty:** Surfaces must convey a believable material reality — velvet-smooth frosted glass and torn photocopied paper are equally valid. Fidelity to the direction's material, not universal smoothness or polish.
pixel-paper-editorial
When your agent uses it
Create or redesign responsive websites with a white dotted background, pixel art stickers, retro pixel UI, and optional bold cutout collage heroes. Use for pixel sticker, dotted paper, or pixel editorial website requests. Preserve this visual language while inventing theme-specific sticker subjects, accent colors, and layouts instead of copying reference assets.
What it loads into context
Frontmatter
73 tokensAlways available to the agent
SKILL.md
1,282 tokensWhen the skill is activated
Reference documents
4,176 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Fixed style, original elements
- General-purpose collage vocabulary
- Website workflow
- Asset and reference boundaries
- Acceptance criteria
Files
SKILL.mdcore6,881 bytesSKILL.mdcore6,881 bytesSKILL.mdcore6,881 bytesagents/openai.yamlasset444 bytesassets/references/01.pngasset1,696,195 bytesassets/references/02.pngasset1,125,247 bytesassets/references/03.pngasset1,039,724 bytesassets/references/04.pngasset1,253,083 bytesassets/references/05.pngasset1,137,948 bytesassets/references/06.pngasset1,261,601 bytesassets/references/07.pngasset1,040,229 bytesassets/references/08.pngasset1,207,660 bytesassets/references/09-collage-cover.pngasset1,660,128 bytesreferences/collage-hero.mddoc6,043 bytesreferences/design-system.mddoc8,040 bytesreferences/web-design.mddoc5,855 bytes
Read SKILL.md
# Pixel Paper Websites
Deliver runnable, editable website code by default. Use the references' visual language to create a new design for the current subject. If the user only requests changes to this skill, update the skill without building a website. If the user explicitly requests a concept image, deliver an image and identify it as a mockup rather than a working website.
## Fixed style, original elements
The requested style is pixel art, not generic paper editorial design. All three characteristics below are required unless the user explicitly changes them:
1. **White dotted background.** Use a white base with a clearly visible, regular grid of small pale gray dots across the main site background. Do not substitute cream paper, a plain background, grid lines, or dots confined to one small section.
2. **Pixel art stickers.** Include prominent original pixel stickers in the first screen and related stickers in subsequent major sections. Construct them on a low-resolution pixel grid, with stepped silhouettes, thick black pixel outlines, white die-cut borders, and subtle shadows. They must visibly be pixel art. Smooth vector cameras, hand-drawn lines, ordinary emoji, and paper stamps are not substitutes.
3. **Pixel UI details.** Use a suitable combination of pixel keycaps, stepped button outlines, pixel cursors, or retro window tabs to establish a retro digital identity. Keep body text and photographs clear and modern; do not pixelate every word or photo.
Freely vary sticker subjects, accent and component colors, content photographs, icon subjects, module counts, card arrangements, composition, and copy. Color freedom applies to accents and components; it does not remove the white dotted background.
Skills included
- app-ui-ux-best-practices
- pixel-paper-editorial
Repository facts
- License
- MIT
- Created
- Jul 7, 2026
- Last pushed
- Nov 1, 2026
- Forks
- 9
- Open issues
- 1
- Project activity
- Active
Before you install
Instructions onlyAutomated signals, not a guarantee
Checked Nov 7, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 4 notes
skills/app-ui-ux-best-practices/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/app-ui-ux-best-practices/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/pixel-paper-editorial/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/pixel-paper-editorial/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzed
- No broad tool permissions
- No dangerous shell commands
- No hidden or obfuscated text
- No instruction overrides
- No executable scripts
- No access to secrets
- No requests to vote in Hot
Show all 151 signals by file
skills/app-ui-ux-best-practices/references/anti-patterns.md
- Network accessline 259
**Action**: Choose typography that reflects the BRAND VOICE, not the category expectation. For CJK products, pick a distinctive emfont family (e.g. `jfOpenHuninn` for friendly-rounded, `cwTeXMing` for editorial Ming, `ChironHeiHK` for Hong - Network accessline 261
**Font Source Rule (MANDATORY — split by script)**: - **Latin / non-CJK** families MUST come from Google Fonts (https://fonts.google.com/). Never use made-up font names, local-only fonts, or fonts from other services (Fontshare, Adobe Fonts - Network accessline 262
- **Latin / non-CJK** families MUST come from Google Fonts (https://fonts.google.com/). Never use made-up font names, local-only fonts, or fonts from other services (Fontshare, Adobe Fonts, etc.) for Latin. - Network accessline 263
- **CJK** families (Simplified Chinese, Traditional Chinese, Japanese, Korean) MUST come from the **`emfont-fonts` skill** (https://font.emtech.cc). The previous rule that allowed Google-Fonts-hosted CJK families (`Noto Sans SC / TC / JP / - Network accessline 422
| **Fake browser frame** | A `<div>` shaped like a Chrome / Safari window, with a URL bar and tab strip drawn into the top of the page | This IS already a webpage. Drawing a webpage inside it is theatrical. | | **Fake macOS traffic lights** - Network accessline 423
| **Fake macOS traffic lights** | The red/yellow/green dot triplet at the top-left of a "window" inside the page | Pure mockup-shot decoration. Adds zero product affordance. | | **Fake URL bar** | An input shaped like an address bar, often - Network accessline 424
| **Fake URL bar** | An input shaped like an address bar, often pre-filled with `https://yourapp.com` | Real users don't interact with a re-drawn URL bar. The browser already provides one. | - Network accessline 467
**Browser / desktop-OS triggers:** - A `<div>` near the top of the page contains 3 small circles colored red/yellow/green (`bg-red-*`, `bg-yellow-*`, `bg-green-*`) within ~20px of each other → fake macOS traffic lights - An `<input>` or `<d - Network accessline 468
- A `<div>` near the top of the page contains 3 small circles colored red/yellow/green (`bg-red-*`, `bg-yellow-*`, `bg-green-*`) within ~20px of each other → fake macOS traffic lights - An `<input>` or `<div>` near the top of the page conta - Network accessline 469
- An `<input>` or `<div>` near the top of the page contains a hardcoded `https://` or `www.` string as static decoration → fake URL bar
skills/app-ui-ux-best-practices/references/component-libraries.md
- Network accessline 21
| Library | URL | Best For | |---------|-----|----------| | **shadcn/ui** | https://ui.shadcn.com/ | Modern React, full control | - Network accessline 22
|---------|-----|----------| | **shadcn/ui** | https://ui.shadcn.com/ | Modern React, full control | | **Radix UI** | https://www.radix-ui.com/ | Headless primitives | - Network accessline 23
| **shadcn/ui** | https://ui.shadcn.com/ | Modern React, full control | - Network accessline 24
| **Radix UI** | https://www.radix-ui.com/ | Headless primitives | - Network accessline 25
| **Mantine** | https://mantine.dev/ | Feature-rich React | - Network accessline 26
| **Chakra UI** | https://chakra-ui.com/ | Accessible, themeable | - Network accessline 30
| Library | URL | Best For | |---------|-----|----------| | **Ant Design** | https://ant.design/ | Enterprise applications | - Network accessline 31
|---------|-----|----------| | **Ant Design** | https://ant.design/ | Enterprise applications | | **Material-UI (MUI)** | https://mui.com/ | Material Design, B2B | - Network accessline 32
| **Ant Design** | https://ant.design/ | Enterprise applications | - Network accessline 33
| **Material-UI (MUI)** | https://mui.com/ | Material Design, B2B | - Network accessline 34
| **Fluent UI** | https://developer.microsoft.com/en-us/fluentui | Microsoft ecosystem | - Network accessline 35
| **Carbon Design** | https://carbondesignsystem.com/ | IBM ecosystem | - Network accessline 36
| **Polaris** | https://polaris.shopify.com/ | Shopify ecosystem | - Network accessline 37
| **Primer** | https://primer.style/react/ | GitHub ecosystem | - Network accessline 41
| Library | URL | Best For | |---------|-----|----------| | **Arco Design** | https://arco.design/ | ByteDance ecosystem | - Network accessline 42
|---------|-----|----------| | **Arco Design** | https://arco.design/ | ByteDance ecosystem | | **Semi Design** | https://semi.design/ | ByteDance alternative | - Network accessline 43
| **Arco Design** | https://arco.design/ | ByteDance ecosystem | - Network accessline 44
| **Semi Design** | https://semi.design/ | ByteDance alternative | - Network accessline 45
| **TDesign** | https://tdesign.tencent.com/ | Tencent ecosystem | - Network accessline 46
| **HeroUI (NextUI)** | https://heroui.com/ | Modern, beautiful defaults | - Network accessline 47
| **origin-ui** | https://originui.com/ | Clean, minimal | - Network accessline 53
| Library | URL | Best For | |---------|-----|----------| | **Ant Design Mobile** | https://mobile.ant.design/ | React Native, Chinese market | - Network accessline 54
|---------|-----|----------| | **Ant Design Mobile** | https://mobile.ant.design/ | React Native, Chinese market | | **React Vant** | https://react-vant.3lang.dev/ | Lightweight mobile | - Network accessline 55
| **Ant Design Mobile** | https://mobile.ant.design/ | React Native, Chinese market | - Network accessline 56
| **React Vant** | https://react-vant.3lang.dev/ | Lightweight mobile | - Network accessline 57
| **Ionic Framework** | https://ionicframework.com/ | Cross-platform | - Network accessline 58
| **Framework7** | https://framework7.io/react/ | iOS/Android feel | - Network accessline 59
| **Konsta UI** | https://konstaui.com/ | iOS/Material mobile | - Network accessline 67
| Library | URL | Best For | |---------|-----|----------| | **DaisyUI** | https://daisyui.com/ | Quick prototyping | - Network accessline 68
|---------|-----|----------| | **DaisyUI** | https://daisyui.com/ | Quick prototyping | | **Flowbite** | https://flowbite.com/ | Marketing sites | - Network accessline 69
| **DaisyUI** | https://daisyui.com/ | Quick prototyping | - Network accessline 70
| **Flowbite** | https://flowbite.com/ | Marketing sites | - Network accessline 71
| **Tailwind Elements** | https://tailwind-elements.com/ | Feature-rich | - Network accessline 72
| **Mamba UI** | https://mambaui.com/ | Templates | - Network accessline 73
| **Meraki UI** | https://merakiui.com/ | Modern blocks | - Network accessline 81
| Library | URL | Description | |---------|-----|-------------| | **Radix UI** | https://www.radix-ui.com/ | Best accessibility | - Network accessline 82
|---------|-----|-------------| | **Radix UI** | https://www.radix-ui.com/ | Best accessibility | | **Headless UI** | https://headlessui.com/ | Tailwind-focused | - Network accessline 83
| **Radix UI** | https://www.radix-ui.com/ | Best accessibility | - Network accessline 84
| **Headless UI** | https://headlessui.com/ | Tailwind-focused | - Network accessline 85
| **Ariakit** | https://ariakit.org/ | WAI-ARIA compliant | - Network accessline 86
| **Base UI** | https://mui.com/base-ui/ | MUI's unstyled layer | - Network accessline 87
| **Ark UI** | https://ark-ui.com/ | Framework agnostic | - Network accessline 95
| Library | URL | Best For | |---------|-----|----------| | **Framer Motion** | https://www.framer.com/motion/ | React, declarative | - Network accessline 96
|---------|-----|----------| | **Framer Motion** | https://www.framer.com/motion/ | React, declarative | | **React Spring** | https://www.react-spring.dev/ | Physics-based | - Network accessline 97
| **Framer Motion** | https://www.framer.com/motion/ | React, declarative | - Network accessline 98
| **React Spring** | https://www.react-spring.dev/ | Physics-based | - Network accessline 99
| **Auto Animate** | https://auto-animate.formkit.com/ | Zero-config | - Network accessline 100
| **Anime.js** | https://animejs.com/ | Vanilla JS | - Network accessline 104
| Library | URL | Best For | |---------|-----|----------| | **Lottie React** | https://github.com/Gamote/lottie-react | After Effects animations | - Network accessline 105
|---------|-----|----------| | **Lottie React** | https://github.com/Gamote/lottie-react | After Effects animations | | **React Flip Toolkit** | https://github.com/aholachek/react-flip-toolkit | FLIP animations | - Network accessline 106
| **Lottie React** | https://github.com/Gamote/lottie-react | After Effects animations | - Network accessline 107
| **React Flip Toolkit** | https://github.com/aholachek/react-flip-toolkit | FLIP animations | - Network accessline 108
| **AOS** | https://michalsnik.github.io/aos/ | Scroll animations | - Network accessline 112
| Library | URL | Description | |---------|-----|-------------| | **react-spinners** | https://www.davidhu.io/react-spinners/ | Spinner collection | - Network accessline 113
|---------|-----|-------------| | **react-spinners** | https://www.davidhu.io/react-spinners/ | Spinner collection | | **react-loading-skeleton** | https://github.com/dvtng/react-loading-skeleton | Skeleton screens | - Network accessline 114
| **react-spinners** | https://www.davidhu.io/react-spinners/ | Spinner collection | - Network accessline 115
| **react-loading-skeleton** | https://github.com/dvtng/react-loading-skeleton | Skeleton screens | - Network accessline 116
| **React Content Loader** | https://github.com/danilowoz/react-content-loader | SVG skeletons | - Network accessline 117
| **NProgress** | https://ricostacruz.com/nprogress/ | Progress bar | - Network accessline 125
| Library | URL | Style | Aesthetic Skew | |---------|-----|-------|----------------| | **Heroicons** | https://heroicons.com/ | Tailwind official | Apple-clean | - Network accessline 126
|---------|-----|-------|----------------| | **Heroicons** | https://heroicons.com/ | Tailwind official | Apple-clean | | **Lucide React** | https://lucide.dev/ | Clean lines | Technical / geometric | - Network accessline 127
| **Heroicons** | https://heroicons.com/ | Tailwind official | Apple-clean | - Network accessline 128
| **Lucide React** | https://lucide.dev/ | Clean lines | Technical / geometric | - Network accessline 129
| **Phosphor Icons** | https://phosphoricons.com/ | 6 weights | Warm / duotone-capable | - Network accessline 130
| **Tabler Icons** | https://tabler-icons.io/ | 5000+ free | Broad / utility | - Network accessline 137
|---------|-----|----------| | **SF Symbols** | Apple official | iOS/macOS apps | | **Material Icons** | https://fonts.google.com/icons | Android/Material | - Network accessline 139
| **Material Icons** | https://fonts.google.com/icons | Android/Material | - Network accessline 143
| Library | URL | Description | |---------|-----|-------------| | **React Icons** | https://react-icons.github.io/react-icons/ | Collection of all major icon sets | - Network accessline 144
|---------|-----|-------------| | **React Icons** | https://react-icons.github.io/react-icons/ | Collection of all major icon sets | | **Iconoir** | https://iconoir.com/ | Minimal line icons | - Network accessline 145
| **React Icons** | https://react-icons.github.io/react-icons/ | Collection of all major icon sets | - Network accessline 146
| **Iconoir** | https://iconoir.com/ | Minimal line icons | - Network accessline 164
| Library | URL | Best For | |---------|-----|----------| | **TanStack Table** | https://tanstack.com/table/ | Headless, flexible | - Network accessline 165
|---------|-----|----------| | **TanStack Table** | https://tanstack.com/table/ | Headless, flexible | | **Material React Table** | https://www.material-react-table.com/ | MUI integration | - Network accessline 166
| **TanStack Table** | https://tanstack.com/table/ | Headless, flexible | - Network accessline 167
| **Material React Table** | https://www.material-react-table.com/ | MUI integration | - Network accessline 168
| **react-data-grid** | https://adazzle.github.io/react-data-grid/ | Excel-like | - Network accessline 172
| Library | URL | Best For | |---------|-----|----------| | **Recharts** | https://recharts.org/ | Declarative React | - Network accessline 173
|---------|-----|----------| | **Recharts** | https://recharts.org/ | Declarative React | | **Nivo** | https://nivo.rocks/ | Beautiful defaults | - Network accessline 174
| **Recharts** | https://recharts.org/ | Declarative React | - Network accessline 175
| **Nivo** | https://nivo.rocks/ | Beautiful defaults | - Network accessline 176
| **Visx** | https://airbnb.io/visx/ | Low-level, D3-based | - Network accessline 177
| **Chart.js** | https://react-chartjs-2.js.org/ | Simple, familiar | - Network accessline 178
| **VChart** | https://www.visactor.io/vchart | ByteDance, feature-rich | - Network accessline 182
| Library | URL | Best For | |---------|-----|----------| | **react-select** | https://react-select.com/ | Custom selects | - Network accessline 183
|---------|-----|----------| | **react-select** | https://react-select.com/ | Custom selects | | **react-datepicker** | https://reactdatepicker.com/ | Date picking | - Network accessline 184
| **react-select** | https://react-select.com/ | Custom selects | - Network accessline 185
| **react-datepicker** | https://reactdatepicker.com/ | Date picking | - Network accessline 186
| **React Colorful** | https://github.com/omgovich/react-colorful | Color picker | - Network accessline 187
| **react-dropzone** | https://react-dropzone.js.org/ | File uploads | - Network accessline 188
| **emoji-mart** | https://github.com/missive/emoji-mart | Emoji picker | - Network accessline 192
| Library | URL | Best For | |---------|-----|----------| | **nice-modal-react** | https://github.com/eBay/nice-modal-react | Imperative modals | - Network accessline 193
|---------|-----|----------| | **nice-modal-react** | https://github.com/eBay/nice-modal-react | Imperative modals | | **react-modal** | https://github.com/reactjs/react-modal | Simple modal | - Network accessline 194
| **nice-modal-react** | https://github.com/eBay/nice-modal-react | Imperative modals | - Network accessline 195
| **react-modal** | https://github.com/reactjs/react-modal | Simple modal | - Network accessline 196
| **Floating UI** | https://floating-ui.com/ | Popovers, tooltips | - Network accessline 200
| Library | URL | Style | |---------|-----|-------| | **Sonner** | https://sonner.emilkowal.ski/ | Modern, minimal | - Network accessline 201
|---------|-----|-------| | **Sonner** | https://sonner.emilkowal.ski/ | Modern, minimal | | **react-hot-toast** | https://react-hot-toast.com/ | Lightweight | - Network accessline 202
| **Sonner** | https://sonner.emilkowal.ski/ | Modern, minimal | - Network accessline 203
| **react-hot-toast** | https://react-hot-toast.com/ | Lightweight | - Network accessline 204
| **react-toastify** | https://fkhadra.github.io/react-toastify/ | Feature-rich | - Network accessline 208
| Library | URL | Best For | |---------|-----|----------| | **dnd-kit** | https://dndkit.com/ | Modern, accessible | - Network accessline 209
|---------|-----|----------| | **dnd-kit** | https://dndkit.com/ | Modern, accessible | | **react-beautiful-dnd** | https://github.com/atlassian/react-beautiful-dnd | Kanban-style | - Network accessline 210
| **dnd-kit** | https://dndkit.com/ | Modern, accessible | - Network accessline 211
| **react-beautiful-dnd** | https://github.com/atlassian/react-beautiful-dnd | Kanban-style | - Network accessline 212
| **react-grid-layout** | https://github.com/react-grid-layout/react-grid-layout | Dashboard layouts | - Network accessline 216
| Library | URL | Best For | |---------|-----|----------| | **Swiper** | https://swiperjs.com/react | Touch-friendly | - Network accessline 217
|---------|-----|----------| | **Swiper** | https://swiperjs.com/react | Touch-friendly | | **Embla Carousel** | https://www.embla-carousel.com/ | Lightweight | - Network accessline 218
| **Swiper** | https://swiperjs.com/react | Touch-friendly | - Network accessline 219
| **Embla Carousel** | https://www.embla-carousel.com/ | Lightweight | - Network accessline 220
| **keen-slider** | https://keen-slider.io/ | Performant | - Network accessline 224
| Library | URL | Best For | |---------|-----|----------| | **react-photo-view** | https://github.com/MinJieLiu/react-photo-view | Lightbox | - Network accessline 225
|---------|-----|----------| | **react-photo-view** | https://github.com/MinJieLiu/react-photo-view | Lightbox | | **React Medium Image Zoom** | https://github.com/rpearce/react-medium-image-zoom | Zoom effect | - Network accessline 226
| **react-photo-view** | https://github.com/MinJieLiu/react-photo-view | Lightbox | - Network accessline 227
| **React Medium Image Zoom** | https://github.com/rpearce/react-medium-image-zoom | Zoom effect | - Network accessline 228
| **react-player** | https://github.com/cookpete/react-player | Video player | - Network accessline 229
| **React BlurHash** | https://github.com/woltapp/blurhash | Image placeholders | - Network accessline 233
| Library | URL | Best For | |---------|-----|----------| | **react-virtuoso** | https://virtuoso.dev/ | Variable height | - Network accessline 234
|---------|-----|----------| | **react-virtuoso** | https://virtuoso.dev/ | Variable height | | **TanStack Virtual** | https://tanstack.com/virtual/ | Flexible | - Network accessline 235
| **react-virtuoso** | https://virtuoso.dev/ | Variable height | - Network accessline 236
| **TanStack Virtual** | https://tanstack.com/virtual/ | Flexible | - Network accessline 237
| **react-window** | https://github.com/bvaughn/react-window | Lightweight | - Network accessline 241
| Library | URL | Best For | |---------|-----|----------| | **react-resizable-panels** | https://github.com/bvaughn/react-resizable-panels | Split panes | - Network accessline 242
|---------|-----|----------| | **react-resizable-panels** | https://github.com/bvaughn/react-resizable-panels | Split panes | | **Allotment** | https://github.com/johnwalley/allotment | Resizable panels | - Network accessline 243
| **react-resizable-panels** | https://github.com/bvaughn/react-resizable-panels | Split panes | - Network accessline 244
| **Allotment** | https://github.com/johnwalley/allotment | Resizable panels | - Network accessline 245
| **react-responsive-masonry** | https://github.com/cedricdelpoux/react-responsive-masonry | Masonry grid | - Network accessline 251
| Library | URL | Best For | |---------|-----|----------| | **Tailwind CSS** | https://tailwindcss.com/ | Utility-first | - Network accessline 252
|---------|-----|----------| | **Tailwind CSS** | https://tailwindcss.com/ | Utility-first | | **Styled Components** | https://styled-components.com/ | CSS-in-JS | - Network accessline 253
| **Tailwind CSS** | https://tailwindcss.com/ | Utility-first | - Network accessline 254
| **Styled Components** | https://styled-components.com/ | CSS-in-JS | - Network accessline 255
| **Emotion** | https://emotion.sh/ | Performant CSS-in-JS | - Network accessline 256
| **CVA** | https://cva.style/ | Variant management | - Network accessline 257
| **Tailwind Variants** | https://www.tailwind-variants.org/ | Tailwind + variants | - Network accessline 258
| **Panda CSS** | https://panda-css.com/ | Build-time CSS-in-JS |
skills/app-ui-ux-best-practices/references/visual-tokens.md
- Network accessline 158
- Minimum body text size: 14px (16px preferred) - **Font sourcing (split by script)**: - **Latin / non-CJK families** MUST come from Google Fonts (https://fonts.google.com/). Load at most 2 Latin families (one display + one body/UI) via t - Network accessline 159
- **Font sourcing (split by script)**: - **Latin / non-CJK families** MUST come from Google Fonts (https://fonts.google.com/). Load at most 2 Latin families (one display + one body/UI) via the Google Fonts CDN. Never invent Latin font nam - Network accessline 160
- **Latin / non-CJK families** MUST come from Google Fonts (https://fonts.google.com/). Load at most 2 Latin families (one display + one body/UI) via the Google Fonts CDN. Never invent Latin font names, never use local-only Latin fonts, nev - Network accessline 161
- **CJK families (Simplified Chinese, Traditional Chinese, Japanese, Korean)** MUST come from **emfont** (https://font.emtech.cc) via the **`emfont-fonts` skill** — load at most 1 CJK family (a 2nd allowed only with explicit brand justifica - Network accessline 303
**Font Source (MANDATORY — split by script)**: - **Latin / non-CJK families** MUST come from Google Fonts (https://fonts.google.com/). Never invent names, never use local-only or non-Google-Fonts services for Latin. - Network accessline 304
- **Latin / non-CJK families** MUST come from Google Fonts (https://fonts.google.com/). Never invent names, never use local-only or non-Google-Fonts services for Latin. - Network accessline 305
- **CJK families (Simplified Chinese, Traditional Chinese, Japanese, Korean)** MUST come from **emfont** (https://font.emtech.cc) via the **`emfont-fonts` skill**. Google Fonts CJK families (`Noto Sans SC / TC / JP / KR`, `Noto Serif SC / T
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Signal confidence: 151 facts
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:259Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:261Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:262Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:263Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:422Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:423Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:424Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:467Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:468Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/anti-patterns.md:469Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:21Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:22Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:23Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:24Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:25Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:26Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:30Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:31Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:32Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:33Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:34Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:35Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:36Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:37Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:41Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:42Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:43Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:44Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:45Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:46Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:47Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:53Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:54Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:55Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:56Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:57Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:58Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:59Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:67Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:68Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:69Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:70Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:71Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:72Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:73Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:81Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:82Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:83Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:84Low confidence
- Network access in prose of documentationapp-ui-ux-best-practices/references/component-libraries.md:85Low confidence
and 101 more
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .claude/skills/<skill-name>/ |
| Codex | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md skills/app-ui-ux-best-practices/SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
