admin/GLM-Tools-Skills-Agents
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add Frontend/UI/UX/Design section with shadcn/ui

Browse Source 
- Create dedicated frontend-ui-ux-design directory
- Add component libraries reference (shadcn/ui, Radix, MUI, etc.)
- Add design systems reference (Material, Carbon, Polaris)
- Add CSS frameworks reference (Tailwind, Bootstrap, CSS-in-JS)
- Add frontend stacks reference (React, Vue, Next.js, Svelte)
- Add UI experts reference (MiniMax, GLM design agents)
- Update README with prominent Frontend section
- Include shadcn/ui quick start guide
- Add recommended 2026 tech stack
This commit is contained in:
uroma
2026-02-13 11:26:26 +00:00
Unverified
parent b60638f0a3
commit cc60c8bdb4
7 changed files with 1431 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
frontend-ui-ux-design/design-systems/README.md Normal file
View File

@@ -0,0 +1,204 @@
# Design Systems Reference
Comprehensive guide to design systems, pattern libraries, and design tokens.
---
## 🎨 Popular Design Systems
### Enterprise Design Systems
| System | Company | URL | Key Features |
|--------|---------|-----|--------------|
| **Material Design** | Google | https://m3.material.io | 3D effects, motion, color system |
| **Apple Human Interface** | Apple | https://developer.apple.com/design | iOS, macOS, watchOS guidelines |
| **Fluent Design** | Microsoft | https://fluent2.microsoft.design | Depth, light, motion, material |
| **Carbon** | IBM | https://carbondesignsystem.com | Open source, enterprise-grade |
| **Polaris** | Shopify | https://polaris.shopify.com | E-commerce focused |
| **Lightning** | Salesforce | https://www.lightningdesignsystem.com | CRM components |
| **Spectrum** | Adobe | https://spectrum.adobe.com | Creative tools design |
| **Evergreen** | Segment | https://evergreen.segment.com | React components |
| **Gestalt** | Pinterest | https://gestalt.pinterest.systems | Pinboard UI patterns |
| **Primer** | GitHub | https://primer.style | Developer-focused UI |
### Startup/SaaS Design Systems
| System | Company | URL | Key Features |
|--------|---------|-----|--------------|
| **Chakra UI** | Chakra | https://chakra-ui.com | Accessible, composable |
| **Mantine** | Mantine | https://mantine.dev | Full-featured hooks |
| **Radix Themes** | Radix | https://radix-ui.com/themes | Accessible primitives |
| **Circuit UI** | SumUp | https://circuit.sumup.com | Fintech focused |
| **Seed** | Intercom | https://seed.intercom.com | Conversation UI |
| **Canvas** | HubSpot | https://canvas.hubspot.com | Marketing tools |
| **Base Web** | Uber | https://baseweb.design | Transportation UI |
| **Atlas** | Atlassian | https://atlassian.design | Collaboration tools |
---
## 🧱 Design Tokens
Design tokens are the visual design atoms of the design system.
### Token Categories
| Category | Examples | Purpose |
|----------|----------|---------|
| **Colors** | primary, secondary, success, error | Brand & semantic colors |
| **Typography** | font-family, font-size, line-height | Text styling |
| **Spacing** | space-xs, space-md, space-lg | Layout gaps |
| **Sizing** | size-sm, size-md, size-lg | Component sizes |
| **Borders** | border-radius, border-width | Edge styling |
| **Shadows** | shadow-sm, shadow-md, shadow-lg | Elevation |
| **Animation** | duration, easing, delay | Motion timing |
| **Breakpoints** | sm, md, lg, xl | Responsive design |
### Token Tools
| Tool | URL | Description |
|------|-----|-------------|
| **Style Dictionary** | https://amzn.github.io/style-dictionary | Token management |
| **Theo** | https://github.com/salesforce-ux/theo | Salesforce token tool |
| **Diez** | https://diez.org | Design language framework |
| **Figma Tokens** | https://www.figmatokens.com | Figma plugin |
| **Token Transformer** | https://tokens.studio | Design token studio |
---
## 🎯 Design Patterns
### Layout Patterns
| Pattern | Use Case | Description |
|---------|----------|-------------|
| **Holy Grail** | General | Header, footer, sidebar, main content |
| **F-Pattern** | Content-heavy | Eye-tracking optimized layout |
| **Z-Pattern** | Landing pages | Visual hierarchy flow |
| **Bento Grid** | Dashboards | Card-based modular layout |
| **Sidebar Navigation** | Apps | Persistent side menu |
| **Top Navigation** | Marketing sites | Horizontal nav bar |
### Component Patterns
| Pattern | Use Case | Description |
|---------|----------|-------------|
| **Card** | Content preview | Container with image, title, actions |
| **Modal** | Focused action | Overlay dialog for interactions |
| **Drawer** | Side content | Slide-out panel |
| **Toast** | Notifications | Brief, auto-dismiss messages |
| **Skeleton** | Loading states | Content placeholder |
| **Infinite Scroll** | Long lists | Continuous content loading |
| **Accordion** | FAQs | Expandable content sections |
---
## 🎨 Style Systems
### Visual Styles
| Style | Key Characteristics | Best For |
|-------|---------------------|----------|
| **Flat Design** | No shadows, minimal, clean | Modern apps |
| **Material Design** | Paper-like, elevation, shadows | Android, enterprise |
| **Glassmorphism** | Frosted glass, blur, transparency | Modern UI, iOS |
| **Neumorphism** | Soft shadows, extruded | Experimental, tactile |
| **Claymorphism** | 3D clay-like, colorful | Playful, approachable |
| **Skeuomorphism** | Realistic textures | Traditional, familiar |
| **Minimalism** | Clean, lots of whitespace | SaaS, professional |
| **Brutalism** | Raw, bold, unconventional | Creative, artistic |
---
## 📱 Responsive Design
### Breakpoints Standard
| Name | Size | Use Case |
|------|------|----------|
| xs | 0-639px | Mobile phones |
| sm | 640px+ | Large phones |
| md | 768px+ | Tablets |
| lg | 1024px+ | Laptops |
| xl | 1280px+ | Desktops |
| 2xl | 1536px+ | Large screens |
### Mobile-First Approach
```css
/* Base styles for mobile */
.element {
padding: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
.element {
padding: 2rem;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.element {
padding: 3rem;
}
}
```
---
## ♿ Accessibility Guidelines
### WCAG 2.1 Levels
| Level | Description | Requirements |
|-------|-------------|--------------|
| A | Minimum | Basic accessibility |
| AA | Standard | Most organizations |
| AAA | Enhanced | Highest accessibility |
### Key Accessibility Rules
1. **Color Contrast** - 4.5:1 for normal text, 3:1 for large text
2. **Focus States** - Visible focus indicators
3. **Keyboard Navigation** - All features accessible via keyboard
4. **Screen Readers** - Proper ARIA labels and roles
5. **Alt Text** - Descriptive image alternatives
6. **Form Labels** - Associated labels for all inputs
7. **Motion** - Respect prefers-reduced-motion
---
## 🔧 Design System Tools
### Documentation Tools
| Tool | URL | Description |
|------|-----|-------------|
| **Storybook** | https://storybook.js.org | Component documentation |
| **Docz** | https://www.docz.site | MDX-based docs |
| **Docusaurus** | https://docusaurus.io | Documentation sites |
| **Zeroheight** | https://zeroheight.com | Design system docs |
| **Specify** | https://specifyapp.com | Design token platform |
### Design Tools
| Tool | URL | Description |
|------|-----|-------------|
| **Figma** | https://figma.com | Collaborative design |
| **Sketch** | https://sketch.com | macOS design tool |
| **Adobe XD** | https://adobe.com/products/xd | Prototyping |
| **Framer** | https://framer.com | Interactive design |
---
## 🔗 Related Skills
- **ui-ux-pro-max** - Complete design intelligence
- **component-libraries** - UI component collections
- **css-frameworks** - CSS utilities
- **frontend-stacks** - Technology stacks
---
*Last updated: 2026-02-13*