afkaar-gen — AI Agent Skill

Generate beautiful PHP flat-file business websites (digital agency style) with an AI coding agent.

Installation

For AI agents (Claude, opencode, etc.)

This skill can be installed via npm:

npx opencode add skill afkaar-gen

Or manually by copying to your skills directory:

git clone https://github.com/iyed/afkaar_gen.git ~/.claude/skills/afkaar-gen

Usage with AI

Ask your AI agent:

"Generate a website like afkars for my business" "Create a digital agency website" "Use afkaar-gen to build my site"

The agent will:

1. Scan your message for uploads (logos, screenshots, URLs)
2. Ask you simple selection-based questions (A/B/C/D)
3. Generate a complete PHP flat-file site
4. Apply security best practices and SEO

Features

• 4 inspiration modes: questionnaire, URL fetch, Figma, iteration
• 17 questions in 4 grouped steps with A/B/C/D selections
• PHP flat-file stack (no database needed, Hostinger-ready)
• 20 security measures (CSRF, bcrypt, CSP, rate limiting, etc.)
• SEO: sitemap.xml, JSON-LD, Open Graph, GTM
• Lazy loading, responsive design, accessibility
• Optional admin panel (CRUD services/references/leads/blog)
• Customizable services and integrations (WhatsApp, Calendly, Stripe...)

Structure

afkaar-gen/
├── SKILL.md                    # Main skill instructions
├── package.json                # npm package
├── references/
│   ├── architecture.md         # Full directory structure & schemas
│   ├── security-checklist.md   # 20 security measures
│   ├── seo-guide.md            # SEO, sitemap, JSON-LD
│   ├── questions.md            # 17 selection-based questions
│   ├── integrations.md         # WhatsApp, Stripe, Calendly...
│   ├── inspiration-mode.md     # URL fetch & analysis
│   ├── figma-mode.md           # Figma screenshot/API
│   └── iteration-mode.md       # Modify existing site

License

MIT