Web Lankan Claude Code Prompt Pack

This prompt pack is designed for WordPress theme development using Claude Code, Web Lankan WordPress skills, Figma MCP, WordPress MCP, GitHub/project file access, ACF, Contact Form 7, WebP helpers, and reusable SCSS/component structure.

Use this workflow to reduce token usage:

1. Create PROJECT_CONTEXT.md once per project.
2. Run initial theme setup once.
3. Create reusable components once.
4. Use the short section prompt for every new page section.
5. Use the Contact Form 7 prompt only when a form is required.

---

1. One Time Project Context Setup Prompt

Use this once per project.

Use my Web Lankan WordPress skills.

Task:
Create a reusable project context file for this WordPress theme so we do not need to repeat the same structure rules in every prompt.

Create this file:
PROJECT_CONTEXT.md

Before creating it, inspect only the required project setup files:

- active theme path
- front-page.php
- page templates
- template-parts folder
- assets/scss folder
- assets/scss/abstract/variables.scss
- assets/scss/abstract/_common.scss
- assets/scss/abstract/global.scss
- assets/scss/abstract/colors.scss
- assets/css folder
- inc/register-styles.php
- functions.php only for theme setup references
- package.json
- ACF setup files or acf-json folder
- existing helper functions such as webp_image_url() and get_image_alt_or_title()

Do not scan the full project unnecessarily.

In PROJECT_CONTEXT.md, document:

1. Active theme path.
2. Theme folder structure.
3. Template part rules.
4. New component/section file path rules.
5. SCSS file path rules.
6. Compiled CSS file path rules.
7. Style registration rules.
8. Sass compile command.
9. ACF field group creation method.
10. ACF naming rules.
11. Existing helper functions.
12. WebP image handling rules.
13. Image alt text rules.
14. Utility classes from _common.scss to reuse.
15. Font variable rules.
16. Color variable rules.
17. Button/component reuse rules.
18. SEO heading hierarchy rules.
19. Performance rules.
20. Files that should not be modified unless clearly needed.

Important:
- This file is for future Claude Code reference.
- Keep it clear and compact.
- Do not create any section or component now.
- Do not modify unrelated files.
- Do not repeat full code from every file.
- Summarize the structure and rules only.

After creating PROJECT_CONTEXT.md, provide:
1. File created.
2. Main structure summary.
3. How I should reference this file in future prompts.

---

2. Initial Theme Setup Prompt

Use this after PROJECT_CONTEXT.md is created.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Task:
Set up the initial theme design system values.

Design source:
[FIGMA URL / BRAND GUIDELINE / SCREENSHOT]

Only inspect files related to initial setup. Do not re-scan the full project.

Setup requirements:

1. Font family setup
   - Add primary, secondary, and optional supporting font variables.
   - Use existing variable naming pattern.
   - Do not hardcode font families inside component files.

2. Color setup
   - Add brand colors to the existing color map.
   - Use meaningful names.
   - Use map.get($colors, color-name) in SCSS.
   - Do not create random color variables inside components.

3. Global style setup
   - Update only true global styles.
   - Body font.
   - Base text color.
   - Image defaults.
   - Smooth behavior if already used.
   - Wrapper/container only if needed.

4. Utility setup
   - Reuse _common.scss utilities.
   - Add only missing reusable typography/color/font utilities.
   - Do not change existing utilities unless required.

5. Sass setup
   - Confirm compile command.
   - Do not change package.json unless Sass setup is missing.

Allowed files to update:
- assets/scss/abstract/variables.scss
- assets/scss/abstract/global.scss
- assets/scss/abstract/_common.scss
- assets/scss/abstract/colors.scss
- package.json only if needed

Do not:
- create sections
- create page templates
- create component markup
- rewrite functions.php
- modify unrelated files

First give a short setup plan:
- files to update
- fonts to add
- colors to add
- utilities to add or reuse
- risks

Then implement safely.

After implementation, provide:
- files modified
- font variables added
- color variables added
- utility classes added or reused
- Sass compile command
- testing checklist

---

3. Reusable Global Component Creation Prompt

Use this for reusable components like buttons, cards, section headings, forms, breadcrumbs, and pagination.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Task:
Create reusable global component styles.

Component name:
[BUTTONS / CARDS / SECTION HEADING / FORMS / BREADCRUMBS / PAGINATION]

Design source:
[FIGMA URL / SCREENSHOT / DESCRIPTION]

Only inspect files directly related to this component. Do not re-scan the full project.

Before coding, confirm:
1. Existing related styles.
2. Exact SCSS file to create or update.
3. Exact compiled CSS path.
4. Whether style registration is needed.
5. Existing utility classes to reuse.
6. Existing font and color variables to use.

Rules:
- Use existing font variables.
- Use existing color map.
- Use map.get($colors, color-name).
- Use _common.scss utility classes for simple typography, spacing, alignment, and display.
- Use custom SCSS only for component-specific design.
- Keep component reusable across the full website.
- Do not make page-specific styles.
- Do not duplicate existing styles.
- Do not modify unrelated files.
- Include hover, focus, active, and disabled states where relevant.
- Keep accessibility in mind.

Preferred paths:
- SCSS:
  assets/scss/components/[component-name].scss

- Compiled CSS:
  assets/css/components/[component-name].css

- Register style only if project pattern requires it:
  inc/register-styles.php

First give a short component plan:
- file to create/update
- classes to create
- utilities to reuse
- custom SCSS needed
- CSS registration needed or not

Then implement safely.

After implementation, provide:
- files created
- files modified
- classes created
- example HTML/PHP usage
- Sass compile command
- testing checklist

---

4. Reusable Button Component Prompt

Use this specifically for button styles.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Task:
Create reusable button styles for the theme.

Design source:
[FIGMA BUTTON DESIGN / SCREENSHOT / BRAND GUIDE]

Only inspect existing button styles, variables, utility classes, and style registration files. Do not re-scan the full project.

Create reusable button classes:

- .btn-main
- .btn-secondary
- .btn-outline
- .btn-text
- .btn-icon if needed

Rules:
- Use existing font variables.
- Use existing color map.
- Use map.get($colors, color-name).
- Do not hardcode random colors.
- Include hover, focus, active, and disabled states.
- Keep buttons accessible.
- Keep styles global and reusable.
- Do not make page-specific button styles.
- Do not modify unrelated files.

Preferred file:
assets/scss/components/buttons.scss

Compiled CSS:
assets/css/components/buttons.css

Register style in:
inc/register-styles.php
only if required by PROJECT_CONTEXT.md.

First give a short plan, then implement safely.

After implementation, provide:
- files created/modified
- button classes created
- example usage
- Sass compile command
- testing checklist

---

5. Create a New Section in a Page Prompt

Use this for normal page section creation.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Task:
Create a new ACF editable section inside a page.

Section name:
[SECTION NAME]

Page/template:
[PAGE NAME OR TEMPLATE FILE]

Position:
[WHERE TO PLACE SECTION]

Design source:
[FIGMA URL / SCREENSHOT / HTML / DESCRIPTION]

Only inspect files directly related to this task:
- target page/template file
- existing nearby section files
- ACF setup file or acf-json folder if needed
- related SCSS component files
- register-styles.php if new style registration is needed

Do not re-scan the full project.

Before coding, confirm:
1. Section PHP path.
2. Section SCSS path.
3. Compiled CSS path.
4. Template include location.
5. ACF field group name.
6. ACF fields required.
7. Backend edit location.
8. Reusable components to use.
9. Utility classes to reuse.
10. Custom SCSS needed.
11. SEO heading level.
12. Image/WebP handling plan.
13. Whether JS is needed.

Use project structure from PROJECT_CONTEXT.md.

Rules:
- Add full markup inside the section template part only.
- Add only get_template_part() to the page/template.
- Use ACF for editable content.
- Do not hardcode backend-editable content.
- Do not duplicate existing ACF fields.
- Check fields before output.
- Use fallback handling.
- Use esc_html(), esc_url(), esc_attr(), and wp_kses_post().
- Use webp_image_url() for JPG/JPEG/PNG images.
- Use get_image_alt_or_title() if available.
- Use reusable button/heading/card classes when available.
- Use _common.scss utility classes for simple styling.
- Use section SCSS only for layout and unique design.
- Keep semantic HTML.
- Keep only one H1 per page.
- Use correct H2/H3 hierarchy.
- Keep mobile-first responsive layout.
- Do not modify unrelated files.

First give a short implementation plan.

Then implement safely.

After implementation, provide:
- files created
- files modified
- ACF fields created
- backend editing guide
- frontend testing checklist
- SEO checklist
- performance checklist

---

6. Super Short Section Prompt

Use this after the project is already set up and Claude knows PROJECT_CONTEXT.md.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Create a new ACF editable section:

Section:
[SECTION NAME]

Page/template:
[PAGE OR TEMPLATE]

Position:
[POSITION]

Design source:
[FIGMA / SCREENSHOT / DESCRIPTION]

Only inspect files related to this section. Do not re-scan the full project.

Reuse existing utilities, buttons, heading styles, ACF method, WebP helper, and style registration pattern.

First give a short plan, then implement safely.

---

7. Super Short Component Prompt

Use this after the project is already set up and Claude knows PROJECT_CONTEXT.md.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Create reusable component styles for:

Component:
[BUTTONS / CARDS / FORMS / SECTION HEADING]

Design source:
[FIGMA / SCREENSHOT / DESCRIPTION]

Only inspect related style files. Do not re-scan the full project.

Use existing variables, colors, fonts, utilities, and style registration pattern.

First give a short plan, then implement safely.

---

8. Contact Form 7 and ACF Shortcode Prompt

Use this when a page section needs a Contact Form 7 form.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Task:
Create a Contact Form 7 form and connect it to an ACF field so the form can be selected/added from the WordPress backend and displayed inside the section.

Section/page:
[SECTION NAME OR PAGE NAME]

Form purpose:
[CONTACT FORM / INQUIRY FORM / BOOKING FORM / NEWSLETTER FORM / CUSTOM FORM]

Design source:
[FIGMA / SCREENSHOT / DESCRIPTION]

Only inspect files related to this task:
- target section/template file
- ACF setup file or acf-json folder
- Contact Form 7 form structure if accessible through WordPress MCP
- related SCSS file
- register-styles.php only if needed

Do not re-scan the full project.

Requirements:

1. Contact Form 7 form
   - Create or prepare the Contact Form 7 form markup.
   - Use clean field labels and placeholders.
   - Use proper required fields.
   - Use suitable field names.
   - Add submit button text.
   - Keep the form structure easy to style.
   - Do not use unnecessary plugins or custom JS unless required.

2. ACF field
   - Add an ACF field to store the Contact Form 7 shortcode.
   - Field label:
     Contact Form Shortcode
   - Field name:
     contact_form_shortcode
   - Field type:
     text or textarea
   - Backend instruction:
     Paste the Contact Form 7 shortcode here. Example: [contact-form-7 id="123" title="Contact Form"]
   - Add this field to the correct page, options page, or section field group depending on the project structure.

3. PHP output
   - Fetch the shortcode using ACF.
   - Check if the shortcode is not empty before output.
   - Render the form using do_shortcode().
   - Do not hardcode the Contact Form 7 shortcode in the template.
   - Do not output an empty form wrapper if no shortcode is added.

Recommended PHP pattern:

$form_shortcode = get_field('contact_form_shortcode');

if ($form_shortcode) {
    echo '<div class="contact-form-wrap">';
    echo do_shortcode($form_shortcode);
    echo '</div>';
}

4. Section placement
   - Confirm where the form should appear:
     - inside existing section
     - new form section
     - contact page template
     - sidebar
     - footer CTA
   - If creating a new form section, use:
     template-parts/theme-blocks/{section-name}/block.php
   - Add only get_template_part() to the page/template.

5. Styling
   - Style the form using the section/component SCSS file.
   - Do not add inline CSS.
   - Do not modify Contact Form 7 plugin files.
   - Use existing variables, colors, fonts, and utility classes.
   - Keep styles scoped to the section wrapper.
   - Style:
     input
     textarea
     select
     labels
     placeholders
     submit button
     validation messages
     success message
     error message

6. Button reuse
   - Reuse existing button classes if available.
   - If Contact Form 7 submit button cannot directly use the class, style it inside the form wrapper.
   - Do not create new button styles if reusable button styles already exist.

7. Validation and accessibility
   - Use clear labels or aria-labels.
   - Required fields should be clear.
   - Keep focus states visible.
   - Make form usable on mobile.

Before coding, confirm:
1. Whether the Contact Form 7 form already exists.
2. If not, provide the CF7 form markup to create.
3. ACF field group name.
4. ACF field name.
5. Backend edit location.
6. PHP file to update.
7. SCSS file to update.
8. Where the form will be displayed.
9. Whether new style registration is needed.

Then implement safely.

After implementation, provide:
1. Contact Form 7 form markup.
2. ACF field created.
3. Files created.
4. Files modified.
5. Backend instructions.
6. Where to paste the shortcode.
7. Frontend testing checklist.

---

9. Short Contact Form 7 Section Prompt

Use this for quick form section tasks.

Read PROJECT_CONTEXT.md and use my Web Lankan Theme Skill, Inline Utility Style Skill, and SEO-Friendly Website Strategy Skill.

Create a Contact Form 7 form area for:

Page/section:
[PAGE OR SECTION NAME]

Form purpose:
[CONTACT / INQUIRY / BOOKING / NEWSLETTER]

Design source:
[FIGMA / SCREENSHOT / DESCRIPTION]

Only inspect files related to this form. Do not re-scan the full project.

Requirements:
- Create/provide Contact Form 7 form markup.
- Add ACF field to store the CF7 shortcode.
- Field name: contact_form_shortcode.
- Render the shortcode in the section using do_shortcode().
- Do not hardcode the shortcode in PHP.
- Style the form in the related section/component SCSS.
- Reuse existing button, color, font, and utility classes.
- Do not edit Contact Form 7 plugin files.
- Keep the form responsive and accessible.

Before coding, confirm:
- CF7 form markup
- ACF field group/location
- PHP file to update
- SCSS file to update
- where the form appears

Then implement safely and provide backend instructions.

---

10. Recommended Contact Form 7 Markup

Normal contact form:

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Email Address"]
[tel your-phone placeholder "Phone Number"]
[text your-subject placeholder "Subject"]
[textarea* your-message placeholder "Message"]
[submit "Send Message"]

Structured contact form:

<div class="wl-form">
  <div class="wl-form__row">
    <div class="wl-form__field">
      [text* your-name placeholder "Your Name"]
    </div>
    <div class="wl-form__field">
      [email* your-email placeholder "Email Address"]
    </div>
  </div>

  <div class="wl-form__row">
    <div class="wl-form__field">
      [tel your-phone placeholder "Phone Number"]
    </div>
    <div class="wl-form__field">
      [text your-subject placeholder "Subject"]
    </div>
  </div>

  <div class="wl-form__field wl-form__field--full">
    [textarea* your-message placeholder "Message"]
  </div>

  <div class="wl-form__submit">
    [submit "Send Message"]
  </div>
</div>

---

11. Recommended PHP Pattern for ACF Contact Form Shortcode

Page-level field:

<?php
$contact_form_shortcode = get_field('contact_form_shortcode');

if ($contact_form_shortcode): ?>
    <div class="contact-form-wrap">
        <?php echo do_shortcode($contact_form_shortcode); ?>
    </div>
<?php endif; ?>

Options page field:

<?php
$contact_form_shortcode = get_field('contact_form_shortcode', 'option');

if ($contact_form_shortcode): ?>
    <div class="contact-form-wrap">
        <?php echo do_shortcode($contact_form_shortcode); ?>
    </div>
<?php endif; ?>

---

12. Recommended Workflow

Use this order for a new WordPress project:

1. Run One Time Project Context Setup Prompt.
2. Run Initial Theme Setup Prompt.
3. Create reusable components:
   - buttons
   - section headings
   - cards
   - forms if needed
4. For every new page section, use the Super Short Section Prompt.
5. For any form section, use the Short Contact Form 7 Section Prompt.

---

13. Important Token Saving Rule

Do not ask Claude every time:

Check full theme structure, SCSS structure, ACF setup, all files, all helpers.

Instead say:

Read PROJECT_CONTEXT.md. Only inspect files related to this task. Do not re-scan the full project.

This keeps Claude Code consistent and reduces token usage.