feat: add new OpenSpec skills for change management and onboarding
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
This commit is contained in:
zguiyang
163
.agents/skills/tailwindcss/references/core-responsive.md
Normal file
163
.agents/skills/tailwindcss/references/core-responsive.md
Normal file
@@ -0,0 +1,163 @@
|
||||
---
|
||||
name: core-responsive
|
||||
description: Building responsive designs with Tailwind's mobile-first breakpoint system and container queries
|
||||
---
|
||||
|
||||
# Responsive Design
|
||||
|
||||
Every utility class in Tailwind can be applied conditionally at different breakpoints using responsive variants.
|
||||
|
||||
## Mobile-First Breakpoints
|
||||
|
||||
Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes, while prefixed utilities apply at that breakpoint and above.
|
||||
|
||||
```html
|
||||
<!-- Center text on mobile, left align on sm screens and up -->
|
||||
<div class="text-center sm:text-left">Content</div>
|
||||
```
|
||||
|
||||
## Default Breakpoints
|
||||
|
||||
| Breakpoint | Minimum Width | CSS |
|
||||
|------------|---------------|-----|
|
||||
| `sm` | 40rem (640px) | `@media (width >= 40rem)` |
|
||||
| `md` | 48rem (768px) | `@media (width >= 48rem)` |
|
||||
| `lg` | 64rem (1024px) | `@media (width >= 64rem)` |
|
||||
| `xl` | 80rem (1280px) | `@media (width >= 80rem)` |
|
||||
| `2xl` | 96rem (1536px) | `@media (width >= 96rem)` |
|
||||
|
||||
## Usage
|
||||
|
||||
Prefix any utility with a breakpoint name:
|
||||
|
||||
```html
|
||||
<!-- Width of 16 by default, 32 on medium screens, 48 on large screens -->
|
||||
<img class="w-16 md:w-32 lg:w-48" src="..." />
|
||||
```
|
||||
|
||||
## Example: Responsive Card
|
||||
|
||||
```html
|
||||
<div class="mx-auto max-w-md md:max-w-2xl">
|
||||
<div class="md:flex">
|
||||
<div class="md:shrink-0">
|
||||
<img class="h-48 w-full object-cover md:h-full md:w-48" src="..." />
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h2 class="text-lg font-semibold">Title</h2>
|
||||
<p class="text-gray-500">Description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Targeting Mobile Screens
|
||||
|
||||
Use unprefixed utilities for mobile, not `sm:`. Think of `sm:` as "at the small breakpoint", not "on small screens".
|
||||
|
||||
```html
|
||||
<!-- ❌ Only centers on screens 640px+, not mobile -->
|
||||
<div class="sm:text-center"></div>
|
||||
|
||||
<!-- ✅ Centers on mobile, left aligns on 640px+ -->
|
||||
<div class="text-center sm:text-left"></div>
|
||||
```
|
||||
|
||||
## Breakpoint Ranges
|
||||
|
||||
Target a specific breakpoint range by stacking responsive variants with `max-*` variants:
|
||||
|
||||
```html
|
||||
<!-- Only applies between md and xl -->
|
||||
<div class="md:max-xl:flex">Content</div>
|
||||
```
|
||||
|
||||
## Max-Width Variants
|
||||
|
||||
Tailwind generates `max-*` variants for each breakpoint:
|
||||
|
||||
| Variant | Media Query |
|
||||
|---------|-------------|
|
||||
| `max-sm` | `@media (width < 40rem)` |
|
||||
| `max-md` | `@media (width < 48rem)` |
|
||||
| `max-lg` | `@media (width < 64rem)` |
|
||||
| `max-xl` | `@media (width < 80rem)` |
|
||||
| `max-2xl` | `@media (width < 96rem)` |
|
||||
|
||||
## Custom Breakpoints
|
||||
|
||||
Add custom breakpoints using `--breakpoint-*` theme variables:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--breakpoint-xs: 30rem;
|
||||
--breakpoint-3xl: 120rem;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="xs:grid-cols-2 3xl:grid-cols-6">Content</div>
|
||||
```
|
||||
|
||||
## Arbitrary Breakpoints
|
||||
|
||||
Use arbitrary values for one-off breakpoints:
|
||||
|
||||
```html
|
||||
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Container Queries
|
||||
|
||||
Style elements based on parent container size instead of viewport:
|
||||
|
||||
```html
|
||||
<!-- Mark container -->
|
||||
<div class="@container">
|
||||
<!-- Style based on container size -->
|
||||
<div class="flex flex-col @md:flex-row">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Container Query Variants
|
||||
|
||||
| Variant | Minimum Width |
|
||||
|---------|---------------|
|
||||
| `@3xs` | 16rem (256px) |
|
||||
| `@xs` | 20rem (320px) |
|
||||
| `@sm` | 24rem (384px) |
|
||||
| `@md` | 28rem (448px) |
|
||||
| `@lg` | 32rem (512px) |
|
||||
| `@xl` | 36rem (576px) |
|
||||
| `@2xl` | 42rem (672px) |
|
||||
| `@3xl` | 48rem (768px) |
|
||||
| ... up to `@7xl` | 80rem (1280px) |
|
||||
|
||||
### Named Containers
|
||||
|
||||
Name containers to target specific ones in nested structures:
|
||||
|
||||
```html
|
||||
<div class="@container/main">
|
||||
<div class="flex flex-row @sm/main:flex-col">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Mobile-first: unprefixed = mobile, prefixed = breakpoint and up
|
||||
- Use unprefixed utilities for mobile, not `sm:`
|
||||
- Stack variants for complex responsive behavior
|
||||
- Container queries enable component-based responsive design
|
||||
- Customize breakpoints with theme variables
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/responsive-design
|
||||
-->
|
||||
Reference in New Issue
Block a user