القائمة
Responsive layout patterns for uFawkes.dev — canonical breakpoints, grid patterns, mobile-first rules, and common layout specs in vanilla CSS/BEM.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Code quality standards for uFawkes.dev — Jekyll/Liquid linting rules, CSS validation, HTML structure checks, and review thresholds. Used by Review and Build agents.
Full lifecycle for uFawkes components — anatomy definition, implementation spec, styling rules, and Jekyll/Liquid integration patterns. For UI and Build agents.
Handoff protocol, dependency sequencing, and parallel task rules for the uFawkes agent team. Ensures agents don't conflict, block each other, or duplicate work.
Prioritization framework, sprint sequencing, and success criteria for uFawkes.dev work. Used by Planning agent to sequence issues across PRs and agents.
Three-phase accessibility workflow for uFawkes.dev — audit (find issues), remediate (fix specifications), verify (confirm compliance). Covers WCAG AA, Jekyll/HTML patterns, and vanilla CSS focus states.
Content strategy for uFawkes.dev — narrative structure, page-level content hierarchy, tone guidelines, CTA copy patterns, and trust signal rules.
| name | responsive-layout |
| description | Responsive layout patterns for uFawkes.dev — canonical breakpoints, grid patterns, mobile-first rules, and common layout specs in vanilla CSS/BEM. |
| license | MIT |
| compatibility | opencode |
/* Tablet — stacks 2-col grids to 1-col */
@media (max-width: 767px) { }
/* Mobile — reduces padding, font sizes */
@media (max-width: 640px) { }
Always mobile-first in logic, even if CSS is written desktop-first. Test at 375px (iPhone SE), 768px (iPad), 1280px (desktop).
.page-wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 640px) {
.page-wrapper { padding: 0 16px; }
}
.hero {
max-width: 720px;
margin: 0 auto;
padding: 64px 24px 48px;
text-align: center;
}
@media (max-width: 640px) {
.hero { padding: 40px 16px 32px; }
}
.grid--2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 767px) {
.grid--2col { grid-template-columns: 1fr; }
}
.grid--sidebar {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
}
@media (max-width: 767px) {
.grid--sidebar { grid-template-columns: 1fr; }
}
| Element | Desktop | Mobile (≤640px) |
|---|---|---|
| H1 | 36px | 28px |
| H2 | 24px | 20px |
| H3 | 18px | 16px |
| Body | 16px | 15px |
| Code | 14px | 13px |
All interactive elements: minimum 44×44px touch target. For links that appear smaller visually, use padding to extend the tap area:
.nav__link {
padding: 12px 16px; /* ensures 44px height */
}
At ≤767px:
Current assets/js/nav.js handles dropdown. Check before adding new nav JS.