Skip to main content

frontend-design

Use when: build or reshape UI with distinctive, intentional visual design instead of generic defaults.

معلومات المصدر

المستودع
kimtth/agent-skill-100-lines-or-less
آخر نشاط في المصدر
٢٦ يونيو ٢٠٢٦ في ٠٢:١٥
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٢
التفرعات
٠

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
frontend-design
description
Use when: build or reshape UI with distinctive, intentional visual design instead of generic defaults.
Goal: create a UI with a specific visual point of view that fits the brief. Use for: - new frontend screens, landing pages, or app surfaces - visual redesigns that need stronger taste and identity - avoiding templated palettes, typography, and layout defaults Workflow: 1. Ground the design in the subject, audience, and page job. 2. Define a compact token system: color, type, layout, signature element. 3. Check whether choices are specific to this brief or generic defaults. 4. Build from the chosen direction; derive every visual choice from it. 5. Use one memorable signature element, then keep surrounding UI disciplined. 6. Critique the result for responsiveness, focus states, reduced motion, and polish. Design principles: - typography carries personality; choose roles deliberately - structure should encode real information, not decorate - motion should serve the subject and be used sparingly - copy is design material: plain, active, consistent, and useful Rules: - take one justified aesthetic risk - avoid default AI-looking palettes and layouts unless the brief demands them - spend boldness in one place, then remove excess decoration - verify the design on mobile and desktop before calling it done
عرض على GitHub