# Frontend Quality Formatting

> Standardized guidelines and patterns for Frontend Quality Formatting.

- Skill: `valec3/frontend-quality-formatting` (Agent Skill)
- Install (CLI): `npx skillmds@latest add valec3/frontend-quality-formatting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-quality-formatting/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/valec3/frontend-quality-formatting

---


# Frontend Quality Formatting

## When to use this skill
- Enforcing code style
- Setting up Prettier
- Configuring auto-formatting

## Workflow
- [ ] Install Prettier
- [ ] Create .prettierrc
- [ ] Add format script
- [ ] Set up editor integration
- [ ] Add to pre-commit

## Instructions

### Installation
```bash
npm install -D prettier
```

### Config
```json
// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
```

### Scripts
```json
{
  "scripts": {
    "format": "prettier --write "src/**/*.{ts,tsx}""
  }
}
```

## Resources
- Consistent code style
- Auto-format on save
- Combine with ESLint