Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
Picks and configures the right layout for a Tabler preview page and covers changing or adding layouts in shared/layouts, including DefaultLayout props and the page-header slot.
Install Tabler Page Layouts
$ npx skills add tabler/tabler --skill page-layouts -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tabler/tabler page-layouts --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/page-layouts .claude/skills/page-layouts && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .claude/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layoutsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add tabler/tabler --skill page-layouts -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tabler/tabler page-layouts --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/page-layouts .agents/skills/page-layouts && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .agents/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tabler/tabler --skill page-layouts -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tabler/tabler page-layouts --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/page-layouts .cursor/skills/page-layouts && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .cursor/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/tabler/tabler.git --path .agents/skills/page-layouts--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tabler/tabler --skill page-layouts -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tabler/tabler page-layouts --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/page-layouts .gemini/skills/page-layouts && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .gemini/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install tabler/tabler page-layoutsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add tabler/tabler --skill page-layouts -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/page-layouts .github/skills/page-layouts && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .github/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tabler/tabler --skill page-layouts -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tabler/tabler page-layouts --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/page-layouts .opencode/skills/page-layouts && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "page-layouts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/page-layouts into .opencode/skills/page-layouts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "page-layouts", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
page-layouts- GitHub stars
- 42k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 670 words
- Files
- 1
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- MIT
At a glance
Picks and configures the right layout for a Tabler preview page and covers changing or adding layouts in shared/layouts, including DefaultLayout props and the page-header slot.
- Works in 7 steps: Which layout → DefaultLayout — content props → DefaultLayout — chrome flags → …
- Choosing a layout for a new Tabler preview page
- SKILL.md covers 1. Which layout, 2. DefaultLayout — content props, 3. DefaultLayout — chrome flags and 4. The page-header slot, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Layouts own the page chrome: head, assets, body classes, navbar or sidebar, page header and footer. A page supplies content and a few props and never its own header block, wrapper divs or html scaffolding. A layout map covers DefaultLayout for normal app pages, SingleLayout for centered sign-in or error cards, SettingsLayout, ProseLayout, ErrorLayout, MarketingLayout, PayLayout, RedirectLayout and BaseLayout for pages with no chrome. Docs pages never choose a layout, because a collection renderer applies DocsLayout.
DefaultLayout takes content props such as title, pageHeader, pretitle, description, pageMenu, pageLibs and pageHeaderFile. pageMenu must match a key in shared/data/menu.json, and pageHeader should be left off when it repeats the title. Chrome flags like navbarPosition map to data-bs attributes on the html element, since each page renders both the sidebar and the navbar and a visitor's stored choice wins. The skill also states rules for new layouts; the excerpt is truncated before them.
When your agent uses it
- Choosing a layout for a new Tabler preview page
- Replacing hand-written page header or wrapper markup with layout props
- Adding a sign-in, error, settings or marketing page with the right chrome
- Before creating a new layout file in shared/layouts
Example prompts
- “Add a sign-up preview page to Tabler using the centered card layout.”
- “This page hand-rolls its own header markup; switch it to DefaultLayout props.”
- “Pick the layout and props for a new billing settings page.”
- “Highlight the badges entry in the menu for this page and load the apexcharts library.”
Requirements
- A checkout of the Tabler repository with its shared/layouts folder
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit b168be1. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are astro).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Tabler Page Layouts loads about 1.5k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 670 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from tabler/tabler at commit b168be1, republished under its MIT licence (© tabler). 670 words, ~1,499 tokens.
Download SKILL.mdSave it as
.claude/skills/page-layouts/SKILL.md (or your agent's skills folder).- name
- page-layouts
- description
- Pick and configure the right layout for a Tabler preview page, and change or add a layout in `shared/layouts/`. Use whenever a page needs different page chrome — sidebar, navbar variant, boxed/fluid body, centered card, error or marketing page — whenever a page hand-rolls a page header or wrapper markup, and before adding a new layout file. Covers the layout map, the `DefaultLayout` props, the page-header slot, and the rules for a new layout.
Page layouts
Layouts own the page chrome: <head>, assets, body classes, navbar/sidebar, page header, footer. A page supplies content and a handful of props — never its own header block, wrapper divs, or <html> scaffolding.
1. Which layout
| Layout | Use for |
|---|---|
DefaultLayout | the normal app page — navbar/sidebar, page header, footer (98 of the preview pages) |
SingleLayout | centered card on an empty page: sign-in, sign-up, error-ish flows (containerSize, hideLogo) |
SettingsLayout | settings pages — wraps the body in a card with the settings nav (active) |
ProseLayout | long-form text in a card-lg + .prose body (terms, changelog) |
ErrorLayout | error pages, content driven by pageError keyed into errors.json |
MarketingLayout | marketing/landing pages with the marketing navbar and footer |
PayLayout | minimal checkout chrome: small logo + close button |
RedirectLayout | bare meta-refresh document (url, base) |
BaseLayout | only when a page needs no chrome at all (screenshot/playground pages). Everything above wraps it. |
Docs pages do not choose a layout — docs/pages/[...slug].astro renders the collection through DocsLayout, and MDX front matter has no layout: key.
2. DefaultLayout — content props
| Prop | Effect |
|---|---|
title | <title> and, by default, the page header title |
pageHeader | header title when it differs from title; pageHeader={false} removes the header |
pretitle | small line above the title (page-pretitle) |
description | line under the title and <meta name="description"> |
pageMenu | menu entry to highlight, e.g. base.badges — must match a key in shared/data/menu.json |
pageLibs | third-party libs to load, keyed into core/libs.json (['apexcharts']) |
pageHeaderFile | swaps the title block for a prebuilt header ("profile", "uptime") |
Do not pass pageHeader when it repeats title — the fallback already covers it.
3. DefaultLayout — chrome flags
Every page renders both navigations — the vertical sidebar and the horizontal navbar — and the layout is chosen by data-bs-* attributes on <html>, which the theme settings panel can change at runtime. Props that map to an attribute state the page's own layout; a visitor's stored choice still wins.
| Prop | Result |
|---|---|
navbarPosition | data-bs-navbar-position — horizontal (default) or vertical |
layout | data-bs-layout — fluid or boxed |
navbarSticky | data-bs-navbar="sticky" |
navbarDark | data-bs-navbar-theme="dark" — the dark palette on whichever navigation shows |
sidebarMode | data-bs-sidebar — folded or folded-hover |
sidebarEnd, sidebarFoldToggle | sidebar markup: end side, pin button |
navbarTransparent, navbarCondensed, navbarOverlap | navbar markup variants |
wrapperFull | page-wrapper-full, drops the .container-xl around the body |
containerCentered, containerClass | my-auto / extra classes on the .container-xl |
bodyClass | free-form body classes; use layout for the container width |
rtl | dir="rtl" plus the RTL stylesheets |
There is no sidebar, hideTopbar or sidebarUser prop any more: which navigation shows is navbarPosition, not which one is rendered, and the sidebar always carries the user block, like the navbar always carries the user menu.
Show full SKILL.md (260 more words)Show less
4. The page-header slot
Anything to the right of the title goes in the page-header-actions slot, as a direct child of the layout:
<DocsLink slot="page-header-actions" path="/ui/components/badge" />
<HeaderActionsButtons slot="page-header-actions" />Prebuilt groups live in shared/components/layout/ (HeaderActionsButtons, HeaderActionsPrint, HeaderActionsPhotos, HeaderActionsBreadcrumb, …). The header renders the actions column only when the slot has content.
5. Never hand-roll chrome
If a page contains <div class="page-header">, <h2 class="page-title">, page-wrapper, page-body, or its own <head> markup, that is a layout prop that was missed. Add or extend the prop instead of duplicating the markup — the same header exists on 100+ pages and drifts the moment one copy is edited.
6. Adding or changing a layout
- A new layout wraps
BaseLayout(orDefaultLayoutwhen it only reshapes the body, likeSettingsLayoutandProseLayout). It never re-emits<html>, assets, or theme settings. - Every prop gets a doc comment naming the class or front-matter key it maps to — follow the existing style in
DefaultLayout. - Booleans default to off; content props are optional with a sensible fallback.
- Keep
<!-- BEGIN … -->/<!-- END … -->markers around structural blocks: users copy the rendered HTML. - Pass
pageLibsthrough toBaseLayoutso pages using the new layout can still load plugins. - Changing a shared layout touches every page that uses it — prove it with the
html-diffskill.
7. Checklist
- Layout chosen from the table, not
BaseLayoutplus hand-written chrome -
title,description,pageMenuset; nopageHeaderrepeatingtitle - Chrome via named flags,
bodyClassonly forlayout-boxed/layout-fluid - Header extras in the
page-header-actionsslot -
pageLibslisted for every plugin the page initialises - Page opened in the browser (
astro-devskill);html-diffrun if a shared layout changed
© tabler, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/page-layouts of tabler/tabler.
Open the folder on GitHubat commit b168be1
Compare with similar skills
Tabler Page Layouts next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tabler Page Layouts this skilltabler/tabler | 42k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT | |
| Userinterface Wikiraphaelsalaja/userinterface-wiki | 906 | — | ~3.5k | Automated safety check: Pass | MIT | |
| UI Design Braincarmahhawwari/ui-design-brain | 893 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Dashboard Builder for holaOSholaboss-ai/holaOS | 11k | — | ~6.3k | Automated safety check: Pass | Custom licence | |
| Variate Design VariationsNutlope/variate | 211 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Userinterface Wiki
raphaelsalaja/userinterface-wiki
UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.
UI Design Brain
carmahhawwari/ui-design-brain
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
Dashboard Builder for holaOS
holaboss-ai/holaOS
Builds the visual layer of a holaOS dashboard app with TanStack Start and @holaboss/ui, starting from a bundled reference instead of a blank page.
Variate Design Variations
Nutlope/variate
Puts four real design variations of one project file on your localhost behind a small card you flip with the arrow keys, then acts on your verdict.
Design-Led Website Builder
liucongg/liucong-skills
Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify.
More from tabler/tabler
All 21 skills in this repoTabler Astro Dev Server
tabler/tabler
Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.
Tabler Astro Component Scripts
tabler/tabler
Rules for adding or fixing client-side scripts in Tabler's Astro components so the copied preview HTML stays readable, self-contained and runs in the right order.
Tabler Bootstrap Component Rules
tabler/tabler
Sets the file structure, typing and Data API pattern for writing a new Bootstrap-style JavaScript component class in Tabler's vendored port of Bootstrap's JS.
Tabler Class Reference Tables
tabler/tabler
Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.
Tabler Core JavaScript
tabler/tabler
Guidance for changing the Tabler framework's own JavaScript in core/js: the tabler.js and tabler-theme.js bundles, the Bootstrap port and their tests.
Tabler Core SCSS
tabler/tabler
Rules for adding or changing styles in Tabler's core/scss framework: file placement, custom properties, dark mode, RTL, tests and build gates.
Related
Categories
Questions about Tabler Page Layouts
What does Tabler Page Layouts do?
Picks and configures the right layout for a Tabler preview page and covers changing or adding layouts in shared/layouts, including DefaultLayout props and the page-header slot. Layouts own the page chrome: head, assets, body classes, navbar or sidebar, page header and footer. A page supplies content and a few props and never its own header block, wrapper divs or html scaffolding.
When should I use Tabler Page Layouts?
Tabler Page Layouts fits situations like: choosing a layout for a new Tabler preview page; replacing hand-written page header or wrapper markup with layout props; adding a sign-in, error, settings or marketing page with the right chrome; before creating a new layout file in shared/layouts.
How do I install Tabler Page Layouts in Claude Code?
Run `npx skills add tabler/tabler --skill page-layouts -a claude-code`. Or copy the skill folder (.agents/skills/page-layouts in tabler/tabler) into .claude/skills/page-layouts in your project. Claude Code loads it when a task matches its description.
How do I install Tabler Page Layouts in Codex?
Run `npx skills add tabler/tabler --skill page-layouts -a codex`. Or copy the skill folder (.agents/skills/page-layouts in tabler/tabler) into .agents/skills/page-layouts in your project. Codex loads it when a task matches its description.
Can I use Tabler Page Layouts in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tabler/tabler --skill page-layouts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/page-layouts, .gemini/skills/page-layouts, .github/skills/page-layouts and .opencode/skills/page-layouts in your project.
What does Tabler Page Layouts need to run?
SKILL.md names no scripts, command-line tools or credentials: Tabler Page Layouts is instructions for the agent only. Our summary lists: A checkout of the Tabler repository with its shared/layouts folder.
Does Tabler Page Layouts access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Tabler Page Layouts safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Tabler Page Layouts use?
Tabler Page Layouts is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Tabler Page Layouts use?
About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Tabler Page Layouts?
Skills that share tags, products or a category with Tabler Page Layouts: Senior Frontend (Ohh-889/skyroc, 795 stars), Userinterface Wiki (raphaelsalaja/userinterface-wiki, 906 stars), UI Design Brain (carmahhawwari/ui-design-brain, 893 stars) and Dashboard Builder for holaOS (holaboss-ai/holaOS, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tabler Page Layouts?
tabler (a GitHub organization) maintains it in tabler/tabler, which has 41,830 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 7, 2026.
Source: tabler/tabler on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.