responsive-design-spec
Builds comprehensive, measurable responsive design specifications based on project needs.
Install
mkdir -p .claude/skills/responsive-design-spec && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12034" && unzip -o skill.zip -d .claude/skills/responsive-design-spec && rm skill.zipInstalls to .claude/skills/responsive-design-spec
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create a responsive design spec with structured process, quality checks, and system integrationKey capabilities
- →Review existing responsive design spec documents
- →Identify key stakeholders and requirements
- →Apply design frameworks like Design Thinking or Atomic Design
- →Define success metrics for the design
- →Structure the responsive design spec using a predefined format
How it works
This skill reviews existing project documentation, identifies stakeholders, applies a chosen design framework, and defines success metrics. It then structures the responsive design spec according to a predefined format and validates its quality.
Inputs & outputs
When to use responsive-design-spec
- →Drafting mobile-first UI specifications
- →Standardizing design documentation
- →Defining project success metrics
About this skill
Responsive Design Spec
Amaç
Eyleme dönüştürülebilir, ölçülebilir sonuçlar sunan kapsamlı bir responsive design spec oluşturun. Bu beceri, her seferinde profesyonel düzeyde çıktı sağlayan, kalite doğrulamalı yapılandırılmış bir süreç sunar.
Kategori: Tasarım ve Yaratıcılık & Creative
Girdiler
Zorunlu
- Hedef: Bu çıktı ile neyi başarmak istiyorsunuz
- Bağlam: İlgili arka plan bilgileri
İsteğe Bağlı
- Kısıtlamalar: Dikkate alınması gereken sınırlamalar veya gereksinimler
- Mevcut Çalışma: Üzerine inşa edilecek önceki belgeler veya veriler
Sistem Bağlamı
Başlamadan önce:
- Mevcut proje bağlamı ve öncelikleri için
memory.md'yi oku - İlgili öğrenilmiş kurallar veya kısıtlamalar için
knowledge-base.md'yi kontrol et - Projedeki mevcut ilgili belgeleri gözden geçir
- Bu çıktı ile ilgili
.claude/workspace/TaskBoard.md'deki aktif görevleri not et
Süreç
Adım 1: Bağlam ve Araştırma
- Projedeki mevcut responsive design spec belgelerini gözden geçir
- İlgili öğrenilmiş kurallar veya kısıtlamalar için
knowledge-base.md'yi kontrol et - Mevcut proje bağlamı ve öncelikleri için
memory.md'yi kontrol et - Kilit paydaşları ve gereksinimlerini belirle
- En uygun çerçeveyi seç: Design Thinking (5 stages), Double Diamond, Atomic Design
Adım 2: Analiz ve Çerçeve Uygulaması
- responsive design spec yapılandırmak için seçilen çerçeveyi uygula
- Boşlukları, fırsatları ve riskleri belirle
- Başarı metriklerini tanımla: Task Completion Rate, Time on Task, Error Rate, System Usability Scale (SUS)
- Varsayımları ve bağımlılıkları belgele
- Yaklaşımı sektör en iyi uygulamalarına göre doğrula
Adım 3: Çıktıyı Oluştur
- responsive design spec aşağıdaki çıktı formatını kullanarak yapılandır
- Genel tavsiyeler değil, spesifik ve eyleme dönüştürülebilir öneriler ekle
- Uygulanabilir yerlerde somut rakamlar, zaman çizelgeleri ve kıyaslamalar ekle
- Tutarlılık için mevcut proje belgeleriyle çapraz referans yap
- Her bölümün değer kattığından emin ol — dolgu içeriği çıkar
Adım 4: Kalite Doğrulama
- Tüm zorunlu girdiler ele alındı
- Öneriler spesifik ve eyleme dönüştürülebilir (belirsiz değil)
- Rakamlar ve kıyaslamalar gerçekçi ve kaynaklı
- Çıktı formatı aşağıdaki spesifikasyona uyuyor
- Bilgi tabanı kurallarıyla çelişki yok
- En iyi pratiği izliyor: Start with user research, not aesthetics
Çıktı Formatı
# Responsive Design Spec
## Yönetici Özeti
[Çıktının ve temel önerilerin 2-3 cümlelik özeti]
## Bağlam ve Hedefler
- **Hedef**: [Bunun neyi başardığı]
- **Hedef Kitle**: [Bunun kimin için olduğu]
- **Zaman Çizelgesi**: [Bunun ne zaman geçerli olduğu]
## Analiz
[Seçilen çerçeve kullanılarak yapılandırılmış analiz]
## Öneriler
1. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
2. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
3. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
## Uygulama
| Eylem | Sorumlu | Zaman Çizelgesi | Öncelik |
|--------|-------|----------|----------|
| [Eylem maddesi] | [Kim] | [Ne zaman] | [Yüksek/Orta/Düşük] |
## Başarı Metrikleri
| Metrik | Mevcut | Hedef | Ölçüm Yöntemi |
|--------|---------|--------|-------------------|
| [KPI] | [Başlangıç] | [Hedef] | [Nasıl ölçülür] |
## Riskler ve Azaltmalar
| Risk | Olasılık | Etki | Azaltma |
|------|-----------|--------|------------|
| [Risk] | [Y/O/D] | [Y/O/D] | [Eylem] |
## Sonraki Adımlar
- [ ] [Hemen yapılacak eylem]
- [ ] [Takip eylemi]
- [ ] [Gözden geçirme tarihi]
Uygulanabilir Çerçeveler
- Design Thinking (5 stages)
- Double Diamond
- Atomic Design
- Design Sprint
- Material Design / Human Interface Guidelines
- WCAG 2.1 AA
Temel Metrikler
- Task Completion Rate
- Time on Task
- Error Rate
- System Usability Scale (SUS)
- Accessibility Score
- Design System Adoption Rate
En İyi Pratikler
- Start with user research, not aesthetics
- Maintain a living design system
- Test with 5 users to find 85% of usability issues
- Accessibility is not optional — design for it from day one
- Document design decisions and rationale
Tamamlandıktan Sonra
- Bu çıktı proje bağlamını veya önceliklerini değiştiriyorsa
memory.md'yi güncelle - Yeniden kullanılabilir öğrenmeleri
knowledge-nominations.md'ye ekle - Takip eylemleri belirlendiyse bunları
.claude/workspace/TaskBoard.md'ye ekle - Ek çalışma gerekiyorsa ilgili skill'leri öner
When not to use it
- →When not creating a responsive design spec
- →When not needing quality-validated structured output
- →When not integrating with existing project documentation
Limitations
- →Requires existing project context and priorities
- →Relies on predefined design frameworks
- →Does not automatically generate design visuals
How it compares
This workflow provides a structured, quality-validated process for creating a responsive design spec, ensuring professional-level output and integration with existing project knowledge.
Compared to similar skills
responsive-design-spec side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| responsive-design-spec (this skill) | 0 | 4mo | No flags | Advanced |
| brief | 0 | 3mo | No flags | Beginner |
| context_uiux_design | 0 | 1mo | No flags | Intermediate |
| ux-designer | 0 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by komunite
View all by komunite →You might also like
brief
educlopez
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
context_uiux_design
Seven128
Use when the user explicitly asks for 设计稿, 重做设计, UI/UX 设计方案, UI 设计师, UX 设计师, 视觉设计方案, 视觉专家, 交互设计方案, 界面设计方案, 页面设计方案, 原型设计, 线框图方案, 视觉规范, 设计系统方案, DESIGN.md, Impeccable review, UX designer, UI designer, frontend redesign, visual polish, or design system spec in a Minimal Context Harness project. Do not t
ux-designer
MYounesDev
|
prism-state-contract
AlexandreBrisebois
Mandatory state handling for the Visual Auditor. Manages snapshots and production assets.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.