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:
@@ -0,0 +1,60 @@
|
||||
---
|
||||
name: typography-text-align
|
||||
description: Controlling text alignment with left, center, right, justify, and logical properties
|
||||
---
|
||||
|
||||
# Text Align
|
||||
|
||||
Utilities for controlling the alignment of text.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic alignment
|
||||
|
||||
Use `text-left`, `text-center`, `text-right`, `text-justify`:
|
||||
|
||||
```html
|
||||
<p class="text-left">Left aligned</p>
|
||||
<p class="text-center">Center aligned</p>
|
||||
<p class="text-right">Right aligned</p>
|
||||
<p class="text-justify">Justified text</p>
|
||||
```
|
||||
|
||||
### Logical properties
|
||||
|
||||
Use `text-start` and `text-end` for RTL-aware alignment:
|
||||
|
||||
```html
|
||||
<div dir="ltr">
|
||||
<p class="text-start">Left in LTR</p>
|
||||
<p class="text-end">Right in LTR</p>
|
||||
</div>
|
||||
<div dir="rtl">
|
||||
<p class="text-start">Right in RTL</p>
|
||||
<p class="text-end">Left in RTL</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive alignment
|
||||
|
||||
```html
|
||||
<p class="text-left md:text-center lg:text-right">
|
||||
Responsive alignment
|
||||
</p>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `text-left` - aligns to left edge
|
||||
- `text-center` - centers text
|
||||
- `text-right` - aligns to right edge
|
||||
- `text-justify` - justifies text (spaces words evenly)
|
||||
- `text-start` - aligns to start (left in LTR, right in RTL)
|
||||
- `text-end` - aligns to end (right in LTR, left in RTL)
|
||||
- Use logical properties (`text-start`, `text-end`) for internationalization
|
||||
- Common pattern: `text-center` for headings, `text-left` for body text
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/text-align
|
||||
-->
|
||||
Reference in New Issue
Block a user