malhajri07/add-page
.claude/skills/add-page/SKILL.md
Scaffold a new agent platform page with the project's standard layout, RTL Arabic, react-query data fetch, skeleton, and sidebar entry. Use when the user asks to "add a page", "create a new page", or "build a screen for X".
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add malhajri07/real-estate-CRM-project add-pageInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 12:55 AM4.5s1 file scanned
SKILL.md
- name:
- add-page
- description:
- Scaffold a new agent platform page with the project's standard layout, RTL Arabic, react-query data fetch, skeleton, and sidebar entry. Use when the user asks to "add a page", "create a new page", or "build a screen for X".
add-page
Scaffold a new platform page that matches the existing patterns. The page must look like every other page in the app — same wrapper, same header, same skeleton, same RTL handling.
Inputs to gather
Before scaffolding, ask (or infer) :
- Page name in English (e.g.
commissions) - Arabic title (e.g.
العمولات) — required - Route path (e.g.
/home/platform/commissions) - Data source — does it
useQueryan existing API? If not, run/add-api-routefirst - Sidebar group — where in
apps/web/src/components/layout/sidebar.tsxdoes the link go?
Steps
- Read a sibling page for the latest pattern. Default reference:
apps/web/src/pages/platform/leads/index.tsx(already follows the post-E2 conventions: tight tables, RTL,PageHeader, soft skeletons). - Create the file at
apps/web/src/pages/platform/{name}/index.tsx. It must:- Import
PageHeaderfrom@/components/ui/page-section-header - Wrap in the standard
PAGE_WRAPPERconstant from@/config/platform-theme - Use
useQuery({ queryKey: ['/api/...'] })from@tanstack/react-query - Render a
<Skeleton>block from@/components/skeletons/...while loading - Default to RTL — use
ms-/me-/ps-/pe-/text-start/text-end(neverml-/mr-) - All visible strings in Arabic — use the project's IBM Plex Sans Arabic stack
- All colors via CSS variable tokens (
bg-card,text-foreground, etc.) — never hex
- Import
- Register the route in
apps/web/src/App.tsx(or wherever the wouter<Switch>lives). - Add the sidebar link in
apps/web/src/components/layout/sidebar.tsxunder the right group. - Run
/typecheckto confirm zero TS errors. - Update the vault: if the page introduces a meaningful new feature, add a note under
Aqarkom_Knowledge/Features/. Otherwise just note it in the next session retro.
Verification checklist
- [ ] Page renders with no console errors
- [ ] Skeleton is visible during loading (use throttle in Network tab to test)
- [ ] All strings are in Arabic
- [ ] No
ml-/mr-/pl-/pr-/text-left/text-rightin JSX - [ ] No hardcoded colors
- [ ] Sidebar link works in both expanded and collapsed states
- [ ]
/typecheckpasses
Anti-patterns
- Don't copy a page that hasn't been refactored to the post-E1 layout — start from
leads/index.tsx - Don't put
<CardContent>padding on tables; use<CardContent className="p-0"> - Don't import lucide icons individually outside the project's icon convention
Related Skills
malhajri07/obsidian-markdown
testing
VerifiedTrustedCommunity
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
SKILL.mdUpdated Apr 16, 2026
malhajri07/obsidian-cli
tools
VerifiedTrustedCommunity
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, properties, and more. Also supports plugin and theme development with commands to reload plugins, run JavaScript, capture errors, take screenshots, and inspect the DOM. Use when the user asks to interact with their Obsidian vault, manage notes, search vault content, perform vault operations from the command line, or develop and debug Obsidian plugins and themes.
SKILL.mdUpdated Apr 16, 2026
malhajri07/obsidian-bases
data-ai
VerifiedTrustedCommunity
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
SKILL.mdUpdated Apr 16, 2026
malhajri07/json-canvas
tools
VerifiedTrustedCommunity
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
SKILL.mdUpdated Apr 16, 2026